DEV Community: Rex Anthony

How Panning and Zooming Work in a 2D top-down game

Rex Anthony — Fri, 16 Aug 2024 14:23:00 +0000

In this article, I will explain my approach to building a camera class that manages panning and zooming in a 2d game canvas.

We look at the underlying mathematical theory, create formulas and then apply it to code. I will then show you the practical execution of the code in a real game.

On the surface of just looking at it, it seems like a no-brainer. In 3D it is fairly straightforward. But how do you replicate that effect in a 2d plane? This is interesting because, in theory, we are looking at the 3d world through a 2d frame.

Let's dig into it then.

Panning

We start with a 2d plane that starts at point (0,0) for the x and y coordinates. This is usually at the top left of the canvas/screen. For this discussion, we will use an infinite canvas with the origin at (0,0). The positive x-axis moves from left to right. At the same time, the positive y-axis moves from top to bottom. This is different from normal maths where the positive y-axis is from bottom to top.

When we pan the screen, we change the position where objects are rendered, like when you scroll through social media. Therefore, if we scroll vertically moving a point from the bottom to the top of the canvas, we need to subtract from the initial y-axis position. Likewise, to move it down, we need to add to the initial y-axis position. The same thing applies if we want to move the point across the x-axis. To move a point to the right, we add to the x-axis and to move a point to the left, we subtract from the x-axis

By using this idea, we can set up a camera class that has a position (x,y) property relative to which we will render our points.

This means that if the camera is at (0,0) and a point is at (1,1). When we render the point on the screen, it will be at (1,1).

If we move the camera to (1,1), and the position of the point remains the same at (1,1), we render it at a new position on the canvas relative to the value that we have set for the camera which should be (0,0). This means that the point is now at the origin of the canvas. If we move the camera to (2,2), and the point has a fixed position at (1,1), the point will no longer be visible on the screen, because it will be at (-1,-1).

Using the above, we can deduce a formula for panning a point on the canvas

render(x,y) = point(x,y) - camera(x,y)

Therefore, by specifying the x and y positions of the camera, we can determine the coordinate on the canvas where the point would be rendered.

Zooming

In 3d when we zoom into something, we bring it closer to our eye which makes it bigger and we can see more detail. This effect can also be achieved on a 2d plane, but to develop a mathematical model of zooming, we need to go down to one dimension.

In a one-dimensional line, let's take the x-axis, the starting point is zero (0) and we can move positively to the right as well as negatively to the left. Let's move positively to a random point, say positive 50.

We want to look at the range from 40 to 60. This means that 50 is in the middle. Because (40+60)/2 = 50.

Now, let's take a look at what happens when we zoom in. If you remember what I said earlier, when we zoom in, we see more detail. Therefore we note the distance from 40 to 50 is 10. And the distance from 50 to 60 is 10. If we render this on the canvas, it would be exactly as we have described without zoom.

Zooming in is like stretching a rubber band out from both ends by the same amount.

When we zoom in, render those points on the screen, and measure their distances we will notice that they are further apart from the implied anchor which is 50. Therefore after zooming in, if we take our ruler and measure the distance from 40 to 50 and 50 to 60 on the canvas, it will be greater than 10. The amount with which it has increased is called the zoom factor.

For example, let's say, we have a zoom factor of 1.5 and render it on the screen. This means that we stretch the line out. What will be the final coordinates and distance from 50? If 40 and 60 were the initial coordinates each with a distance of 10 to the point 50.

This is really easy to calculate and requires 3 steps

Find the distance from the origin(50)
Multiply the distance to the zoom factor to get the new distance
Add the new distance to the origin(50) to get the new coordinates

Let's do this for the end at point 40 applying a zoom factor of 1.5 which is the final rendered point on the canvas.

Step 1. 40 - 50 = -10
Step 2. -10 × 1.5 = -15
Step 3. -15 + 50 = 35

For point 40, this means that the new final coordinate after zoom is applied is 35.

For point 60 also applying a zoom factor of 1.5 what is the final rendered point on the canvas?

Step 1. 60 - 50 = 10
Step 2. 10 × 1.5 = 15
Step 3. 15 + 50 = 65

For point 60, this means that the new final coordinate after zoom is applied is 65.

Therefore before Zoom, the 3 important points that we are looking at are 40,50,60. After a zoom factor of 1.5 is applied, does points are scaled to 35,50,65. This is all done in 1 dimension.

Point 50 is called the focus because as you see it remains constant as it is the point from which others are scaled.

Let's develop a formula using the above that we will use just like we did for panning.

Let's say that

xb is the coordinate of the point before Zoom,
xa is the coordinate of the point after Zoom,
xf is the focus point, and
z is the Zoom factor

Compressing the 3 steps above into one expression, we have the following

xa = (xb - xf)z + xf

Solving the above, you get

xa = zxb - zxf + xf
xa = zxb - xf(z-1)
zxb = xa + xf(z-1)
xb = (xa + xf(z-1)) / z

There you have it.
The final coordinate of a point after zoom is applied is given by the following formula

xa = zxb - xf(z-1)

Applying this to 2-dimensional coordinates requires you to perform this calculation on each coordinate for (x,y).

Applying this to the camera class, we store a zoom variable for the zoom factor and, use the x and y coordinates of the camera as the focus and apply a zoom (i.e calculate the final x and y positions) on all points relative to the focus.

render(x,y) = applyZoom(point(x,y), camera(x,y))

where applyZoom has the following function definition

applyZoom(point, focus)

Note that to pan and zoom, pass in the new pan position to the applyZoom function to get the new pan+zoom position for rendering. Pan first, zoom second.

The camera class

Here is the complete camera class in JavaScript, I have stripped it down to show only what is needed to implement panning and zooming, use it as a basis for your implementation, and don't forget to credit me for helping you out.

class GameCamera {
    constructor(gameState) {
        this.gameState = gameState;
        this.isFocusOnGameObject = false;
        this.focusedGameObject = undefined;
        this.cameraWidth = game.canvas.width;
        this.cameraHeight = game.canvas.height;
        this.position = new Vector2D(0, 0);
        this.direction = new Vector2D(0, 0);
        this.target = new Vector2D(0, 0);
        this.point = new Vector2D(0, 0);
        this.offsetX = 0;
        this.offsetY = 0;
        this.duration = 0;
        this.elapsedTime = 0;
        this.callback = undefined;
        this.minDistance = 1;
        this.zoomLevel = 1;
    }

    // Method to specify a location in world space where camera should focus
    setFocus(x, y, offsetX = 0, offsetY = 0, translateAnimationDuration = 0, animationCompleteCallback = undefined) {
        this.isFocusOnGameObject = false;
        this.point.set(x, y);
        this.target.set(this.point.x - (this.cameraWidth / 2) - offsetX, this.point.y - (this.cameraHeight / 2) - offsetY);
        this.offsetX = offsetX;
        this.offsetY = offsetY;
        this.duration = translateAnimationDuration;
        this.callback = animationCompleteCallback;
    }

    // Method to attach a target that the camera will follow
    setTarget(gameObject, offsetX = 0, offsetY = 0, translateAnimationDuration = 0, animationCompleteCallback = undefined) {
        this.isFocusOnGameObject = true;
        this.point.set(gameObject.property.position.x + (gameObject.property.size.width / 2), gameObject.property.position.y + (gameObject.property.size.height / 2));
        this.target.set(this.point.x - (this.cameraWidth / 2) - offsetX, this.point.y - (this.cameraHeight / 2) - offsetY);
        this.focusedGameObject = gameObject;
        this.offsetX = offsetX;
        this.offsetY = offsetY;
        this.duration = translateAnimationDuration;
        this.callback = animationCompleteCallback;
    }

    update(deltaLoopTimeInMilliseconds) {

        // because the object might move (change its x,y position), we update the point and target each frame
        if (this.isFocusOnGameObject) {
            // set the point to the middle of the object
            this.point.set(this.focusedGameObject.property.position.x + (this.focusedGameObject.property.size.width / 2), this.focusedGameObject.property.position.y + (this.focusedGameObject.property.size.height / 2));
            // move the camera target to position the point at the center of the camera boundary +- offset
            this.target.set(this.point.x - (this.cameraWidth / 2) - this.offsetX, this.point.y - (this.cameraHeight / 2) - this.offsetY);
        }

        // check if the camera has focused on the target else transition smoothly to the target
        if (this.position.distance(this.target) < this.minDistance) {
            this.elapsedTime = 0;
            this.setPosition(this.target.x, this.target.y);
            if (this.callback != undefined) {
                this.callback();
                this.callback = undefined;
            }
        } else {
            if (this.duration == 0) {
                this.setPosition(this.target.x, this.target.y);
            } else {
                this.elapsedTime += deltaLoopTimeInMilliseconds;
                if (this.elapsedTime > this.duration) this.elapsedTime = this.duration;
                let ratio = this.elapsedTime / this.duration;
                this.direction.set(this.target.x, this.target.y);
                this.direction.subtract(this.position);
                this.direction.multiply(ratio);
                this.position.add(this.direction);
                this.setPosition(this.position.x, this.position.y);
            }
        }
    }

    // Method to set the camera's position
    setPosition(x, y) {
        this.position.x = Math.max(0, Math.min(x, (this.gameState.worldWidth - this.cameraWidth)));
        this.position.y = Math.max(0, Math.min(y, (this.gameState.worldHeight - this.cameraHeight)));
    }

    render(textureId, x, y, width, height, sourceWidth, sourceHeight, row, frame) {

        let objectX = ((x - this.point.x) * this.zoomLevel) + this.point.x - this.position.x;
        let objectY = ((y - this.point.y) * this.zoomLevel) + this.point.y - this.position.y;

        // if object is in the frame of the camera, render it.
        if (
            objectX < this.cameraWidth &&
            objectX + width > 0 &&
            objectY < this.cameraHeight &&
            objectY + height > 0
        ) {
            textureManager.drawCameraFrame(
                textureId,
                objectX,
                objectY,
                width,
                height,
                sourceWidth,
                sourceHeight,
                row,
                frame,
                this.zoomLevel,
                game.ctx
            );
        }
    }
}

Practical example

If you have done everything as described in this article, you will have created your camera class using pure JavaScript without any frameworks. Here is an example of it in action

This gif is from ShareTXT virtual which is a free real open-world, massive online multiplayer experience, where you can interact with other players and engage in fun activities together.

The graphic assets for the illustrations used in this article are listed below

I hope this article has helped you to understand the theory of how panning and zooming work in a 2d plane or game. I have given you the formulas, as well as how to represent them in code for execution in your programming language of choice. I have also shown you the practical result that should be expected if you do everything as expected. Have a nice day.

Meet the Future of Virtual Worlds: An Inside Look at ShareTXT Virtual

Rex Anthony — Wed, 07 Aug 2024 06:21:00 +0000

Imagine a world where every player you meet is a real person, and every conversation could lead to a new friendship, alliance, or rivalry. Whether you're a social butterfly or a lone explorer, ShareTXT Virtual offers something for everyone.

ShareTXT virtual is a free-to-play online massive multiplayer open-world experience where you can interact with other players and engage in fun activities together.

It was developed with a mobile-first approach, which is an innovative design methodology. This means that it works well on both mobile and desktop with a high-performance metric.

*This is more than just a game; it's a dynamic, interactive universe where players from all corners of the globe come together to explore, compete, and connect. *
This is a dream come true and is shaping up to become a massive shake-up in online interaction. This is great news for players.

The reviews have been glowing, with users hailing everything from the interaction to the gameplay experience.

Connect and Communicate

Communication is at the heart of ShareTXT Virtual. The platform offers a range of ways to interact with fellow players:

Public Shout Outs: Got something to say to the entire world? Public shoutouts let you broadcast your messages for everyone to see. Whether you’re organizing an event, issuing a challenge, or just want to make your presence known, public shoutouts are your megaphone.
Private Messages: Prefer a more personal touch? Private messaging allows you to have one-on-one conversations, perfect for strategizing with friends or getting to know new acquaintances.

Customize Your Experience

Express yourself in ShareTXT Virtual with multiple skins that allow you to personalize your character. Whether you want to stand out in a crowd or blend in with your surroundings, these customization options ensure your avatar truly represents you.

There are multiple skins that players can choose from to customize their playing experience.

Explore Vast Terrains

The world of ShareTXT Virtual is vast and varied, featuring over 30 unique terrains waiting to be explored. Each terrain is filled with hidden secrets and stories just waiting to be discovered. From lush forests to eerie wastelands, every corner of this world holds new adventures and challenges.

Engage in Exciting Activities

The fun never stops in ShareTXT Virtual. The city is a bustling hub of activities where there's always something happening:

Mini Games: Compete against other players in a variety of mini-games. Whether you’re battling for the top spot on the leaderboard or just looking to have some fun, these games offer endless entertainment and rewards.
Night Clubs: Ready to show off your dance moves? Head to the nightclub where you can dance the night away and maybe even win a dance-off.
Theaters and Poetry: For those who appreciate the arts, our theaters host songs, poetry readings and storytelling sessions. Sit back, relax, and enjoy the creative expressions of your fellow players.
Comedy Clubs: Laughter is the best medicine, and our comedy clubs are just the place to get your dose. Enjoy performances by some of the funniest players in the game, or step on stage yourself and try out your best jokes.
Book clubs: If you love diving into a good book and discussing it with others, our book clubs are perfect for you. Share your favorite reads, explore new genres, and connect with other book enthusiasts. The world is at your feet. You can create your group and interactions in the virtual world.

Uncover Hidden Secrets

Eventually, the inhabitants of ShareTXT Virtual wouldn't just be other players. In time, our world will be populated by AI-driven NPCs (Non-Player Characters) who have their own stories, secrets, and personalities. Interact with them just like you would with any other player. Earn their trust, and they might just reveal secrets that can lead to new quests and hidden treasures.

Join the Adventure

So what are you waiting for? ShareTXT Virtual is more than a game; it's a living, breathing world full of possibilities. Whether you're looking to make new friends, challenge your skills, or just explore a rich and immersive environment, ShareTXT Virtual has something for you.

Ready to dive in? Visit ShareTXT Virtual now and start your adventure today. The world is waiting for you.

File Sharing Alternatives to Email Attachments

Rex Anthony — Mon, 17 Apr 2023 19:36:23 +0000

Email attachments can be a convenient way to share files with others, but they also come with a number of challenges. Unlike sharing passwords and text, attachments can be large, which can make emails slow to send and receive, and they can also be prone to errors and security risks. If you're looking for a better way to share files, there are a number of alternatives to email attachments that can provide more reliable and secure file-sharing options.

In this post, I'll explore some of the best file-sharing alternatives to email attachments. From cloud storage and file-sharing services to file transfer protocols and collaboration and project management tools, we'll cover a range of options that can help you share files more efficiently and securely. Whether you're working on a team, sharing files with clients, or simply looking for a better way to share files with friends and family, these file-sharing alternatives can provide the solutions you need.

Cloud storage and file-sharing services

Cloud storage and file-sharing services provide a convenient and easy way to store and share files online. These services offer users a certain amount of storage space on remote servers, which can be accessed from any device with an internet connection. Some popular examples of cloud storage and file-sharing services include Google Drive, Dropbox, and OneDrive.

One of the main benefits of using cloud storage and file-sharing services is that they allow users to access their files from any device, at any time. This can be especially useful for teams or individuals who need to share files and collaborate on projects remotely. Cloud storage and file-sharing services also make it easy to share files with others, as users can simply send a link to the file or folder, rather than sending large attachments via email.

However, there are also some potential drawbacks to using cloud storage and file-sharing services. One concern is security, as users are trusting their files to a third-party service. It's important to choose a reputable and secure cloud storage and file-sharing service and to take additional steps to protect your files (e.g. using strong passwords, and enabling two-factor authentication). Additionally, users may need to pay for additional storage space if they exceed the allotted amount, and some services may have limitations on file types or sizes that can be uploaded.

File Sharing services such as ShareTXT eliminate the worry about security by offering an innovative solution that enables you to share your files end-to-end between your devices without them being stored somewhere in some database. This eliminates the need for an intermediate server.

Overall, cloud storage and file-sharing services can be a convenient and efficient way to store and share files, but it's important to carefully consider the security and cost implications before committing to a particular service.

File transfer protocols

:{"type":"videoEmbed", "src":"https://www.youtube.com/embed/tOj8MSEIbfA", "title":"Youtube Video Player", "allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"}
...

File transfer protocols (FTPs) are a set of rules that govern the exchange of files over a network. There are a variety of file transfer protocols, including FTP (File Transfer Protocol), SFTP (SSH File Transfer Protocol), and HTTPS (Hypertext Transfer Protocol Secure). These protocols enable users to transfer files between computers, servers, and other devices over the internet.

One of the main benefits of using file transfer protocols is that they allow you to transfer large files quickly and efficiently. FTPs also offer a high level of security, as they use encryption to protect the data being transferred. This can be especially important for transferring sensitive or confidential files.

However, there are also some potential drawbacks to using file transfer protocols. One concern is that they can be complex to set up and configure, especially for users who are not familiar with network protocols. FTPs also require specialized software or tools to use, such as FileZilla or WinSCP. Additionally, FTPs may not be as user-friendly as other file-sharing methods, such as cloud storage and file-sharing services.

Overall, file transfer protocols can be a powerful and secure way to transfer large files, but they may not be the best option for all users. It's important to consider your specific needs and the resources available to you when deciding whether to use a file transfer protocol for file sharing.

Collaboration and project management tools

Collaboration and project management tools are software applications that enable teams to work together and manage projects more efficiently. These tools can include features such as task assignments, file sharing, real-time communication, and progress tracking. Some popular examples of collaboration and project management tools include Trello, Asana, and Slack.

One of the main benefits of using collaboration and project management tools is that they provide a central platform for teams to organize and manage their work. These tools can help teams stay organized and on track, and can also improve communication and collaboration between team members.

However, there are also some potential drawbacks to using collaboration and project management tools. One concern is that these tools may require a learning curve for users who are not familiar with them, and may require some time and effort to set up and configure. Additionally, some collaboration and project management tools may require a subscription or payment to use, and may not be suitable for all types of projects or teams.

Overall, collaboration and project management tools can be a powerful way to improve productivity and efficiency for teams, but it's important to carefully consider the costs and resources required before committing to a particular tool.

Conclusion

In conclusion, email attachments are not the only option for file sharing. There are a number of alternatives that can provide more efficient, secure, and reliable file sharing solutions. From cloud storage and file sharing services to file transfer protocols and collaboration and project management tools, there are a range of options available to suit different needs and budgets.

When choosing a file sharing method, it's important to consider the specific needs of your team or project, as well as the resources and budget available. Consider factors such as the size and type of files being shared, the level of security and reliability required, and the level of collaboration and organization needed. By carefully evaluating the options and choosing the best solution for your needs, you can improve the efficiency and effectiveness of your file sharing process.

How to Properly Attribute and Cite Sources when Sharing Content Online

Rex Anthony — Wed, 04 Jan 2023 13:27:05 +0000

When sharing content online whether as a post, social media, or any other media, it's important to properly attribute and cite sources to give credit to the creators and owners of the content, and to ensure that your own work is accurate and credible. Proper attribution and citation not only helps to respect the rights of others, but it can also enhance the quality and value of your own content.

But what exactly is attribution and citation, and why are they important? Attribution is the act of giving credit to the source of the content you are using or sharing. This can be as simple as including the name of the creator or owner and a link to the original source. Attribution helps to acknowledge the contributions of others and can help to establish your own credibility as a content creator.

Citation, on the other hand, involves providing more detailed information about the source of the content, including the title, author, publication date, and other relevant details. Citations are typically used in academic or professional contexts to provide a clear and detailed record of the sources used in a piece of work. In addition to helping to establish credibility and prevent plagiarism, citations also provide readers with the information they need to locate and verify the sources themselves.

In this blog post, I'll delve into the basics of attribution and citation, and discuss best practices for properly attributing and citing sources when sharing content online. I'll also explore some tools and resources that can help you to attribute and cite sources effectively. Whether you're a content creator, business owner, or social media enthusiast, these tips will help you to properly attribute and cite sources and share content with confidence.

What is attribution?

Attribution is the act of giving credit to the source of the content you are using or sharing. It involves acknowledging the contributions of others and helping to establish your own credibility as a content creator. Proper attribution is important for a number of reasons:

It helps to respect the rights of others: By properly attributing content, you are acknowledging the contributions of the creators and owners of the content and showing respect for their rights. This is especially important when you are using content that is protected by copyright or other intellectual property laws.
It can enhance the quality and value of your own content: By including attribution, you can provide your readers with additional context and resources, and enhance the overall value of your content. Attribution can also help to establish your own credibility as a content creator by demonstrating that you are using reliable and reputable sources.
It can help to prevent plagiarism: Proper attribution can help to prevent plagiarism, which is the act of using someone else's work without giving credit. Plagiarism is not only unethical, but it can also have serious legal and professional consequences. By properly attributing content, you can avoid potential issues related to plagiarism and demonstrate that you are using content responsibly.

To properly attribute content, you should include the name of the creator or owner and a link to the original source. This can be as simple as adding a byline or including a link to the source in the text of your post. Depending on the context and the type of content you are sharing, you may also need to include additional information, such as the title of the work or the date it was published.

What is citation?

Citation is the act of providing detailed information about the source of the content you are using or sharing. It involves including specific details about the work, such as the title, author, publication date, and other relevant information. Citations are typically used in academic or professional contexts to provide a clear and detailed record of the sources used in a piece of work.

There are many different citation styles, each with its own set of rules and guidelines for formatting citations and referencing sources. Some common citation styles include APA, MLA, and Chicago. Depending on the context and the type of content you are sharing, you may need to use a specific citation style or follow the guidelines of a particular organization or publication.

Citation is important for a number of reasons:

It helps to establish credibility and prevent plagiarism: By properly citing sources, you can demonstrate that you are using reliable and reputable sources and help to prevent plagiarism. Plagiarism is the act of using someone else's work without giving credit, and it can have serious legal and professional consequences.
It provides readers with the information they need to locate and verify sources: By including detailed citation information, you can provide your readers with the information they need to locate and verify the sources you are using. This can be especially important in academic or professional contexts, where readers may need to consult the original sources for further information or analysis.
It helps to support your own work: By citing sources, you can provide evidence and support for your own work and help to establish your own credibility as a content creator. Citations can also help to demonstrate that you are familiar with the research and literature in your field and that you are using this knowledge to inform your own work.

To properly cite sources, you should include all of the relevant information about the source, including the title, author, publication date, and other details as required by the citation style you are using. You should also include a reference list or bibliography at the end of your work, which lists all of the sources you have cited in alphabetical order.

Tools and resources for attribution and citation

There are many different tools and resources available to help you attribute and cite sources effectively when sharing content online. Here are some options to consider:

Manual methods: If you prefer to attribute and cite sources manually, there are a number of resources that can help you to do so. These include style guides, such as the APA, MLA, or Chicago style guides, which provide detailed instructions on how to format citations and references. You can also find online resources, such as citation generators, which can help you to create citations in a specific style.
Online tools and resources: There are a number of online tools and resources that can help you to attribute and cite sources more efficiently. Some options include:
- Citation management tools: These tools allow you to create, organize, and manage your citations and references in one place. Popular citation management tools include EndNote, Zotero, and Mendeley.
- Plugins and extensions: There are a number of browser extensions and plugins that can help you to attribute and cite sources more easily. For example, the EasyBib extension for Google Chrome allows you to generate citations for websites and articles with a single click.
- Online citation generators: There are many online citation generators available that can help you to create citations in a variety of styles. Some popular options include Citation Machine and BibMe.

By using these tools and resources, you can streamline the process of attributing and citing sources and ensure that you are using content responsibly and legally.

Conclusion

In conclusion, proper attribution and citation are crucial for anyone who creates or shares content online. By giving credit to the sources of the content you use and sharing detailed information about those sources, you can respect the rights of others, establish your own credibility, and prevent plagiarism. Whether you're a content creator, business owner, or social media enthusiast, understanding and properly using attribution and citation can help you to share content responsibly and legally.

There are many different tools and resources available to help you attribute and cite sources effectively. From manual methods like style guides to online tools like citation management software and online citation generators, there are a variety of options to suit your needs and preferences. By using these resources, you can streamline the process of attributing and citing sources and ensure that you are using content responsibly and legally.

I hope this blog post has helped you to better understand the importance of attribution and citation when sharing content online and has given you some ideas for how to attribute and cite sources effectively. Let me know if you have any other questions or need further assistance.

Time Management Techniques for Remote Workers

Rex Anthony — Sun, 01 Jan 2023 12:17:56 +0000

Remote work has become increasingly popular in recent years, and with the COVID-19 pandemic, more people than ever are working from home. While remote work has many benefits, such as flexibility and the ability to work from anywhere, it can also be challenging to stay focused and manage your time effectively.

Effective time management is especially important for remote workers, as it can help you stay on track and achieve your goals more efficiently. By using time management techniques, you can avoid distractions, stay organized, and get more done.

In this blog post, we'll discuss time management techniques specifically for remote workers. From setting clear goals and priorities to taking breaks and exercising regularly, these techniques can help you stay focused and avoid burnout. By following these tips, you can improve your productivity and achieve your goals more efficiently as a remote worker.

Identify your goals and priorities

Identifying your goals and priorities is an important step in managing your time effectively when you work remotely. By setting clear goals and priorities, you can stay focused on what is most important and avoid wasting time on tasks that are less important or not aligned with your goals.

To identify your goals and priorities, start by considering what you want to achieve in your work. This could be career advancement, increasing your income, or making a positive impact in your field. Once you have identified your overall goals, break them down into smaller, more specific objectives. For example, if your goal is to advance your career, you might set specific objectives such as completing a certification program or networking with industry leaders.

Once you have identified your goals and objectives, prioritize them based on their importance and deadline. This can help you stay focused on what is most important and avoid getting overwhelmed by too many tasks. You can also use tools like the Eisenhower Matrix to help you prioritize tasks based on their urgency and importance.

By setting clear goals and priorities, you can stay focused on what is most important and avoid wasting time on tasks that are less important or not aligned with your goals. This can help you manage your time effectively and achieve your goals more efficiently as a remote worker.

Create a task list

Creating a task list is an important part of managing your time effectively when you work remotely. By organizing your tasks in a list, you can stay on top of what needs to be done, avoid wasting time, and stay focused on your goals.

To create a task list, start by writing down all the tasks you need to complete. This can include everything from small tasks like answering emails to larger projects like creating a presentation. Once you have a comprehensive list of tasks, prioritize them based on their importance and deadline. This can help you focus on the most important tasks first and avoid getting overwhelmed.

There are several tools and techniques you can use to create and manage your task list. One simple method is to use a paper or digital to-do list, where you can write down each task and check it off as you complete it. You can also use task management software or apps, such as Todoist, Trello or Asana, which allow you to create and organize tasks, set deadlines, and track progress.

By creating a task list and using tools to manage your tasks, you can stay on top of what needs to be done and avoid wasting time. This can help you manage your time effectively and achieve your goals more efficiently as a remote worker.

Use the Pomodoro Technique

The Pomodoro Technique is a time management technique that can help you stay focused and avoid burnout when you work remotely. The technique involves working in focused bursts, followed by short breaks to recharge. This can help you stay focused and avoid distractions, and it can also help you avoid burnout by taking breaks to rest and recharge.

To use the Pomodoro Technique, set a timer for 25 minutes and work on a task without any distractions. When the timer goes off, take a 5 minute break to rest and recharge. After four Pomodoros (or 100 minutes of work), take a longer break of 15-30 minutes. You can use a timer or a Pomodoro app to help you stay on track.

The Pomodoro Technique can be customized to fit your needs and schedule. You can adjust the length of the work and break intervals to find what works best for you. Some people find that shorter work intervals help them stay focused, while others prefer longer intervals. Experiment with different intervals to find what works best for you.

By using the Pomodoro Technique, you can stay focused and avoid burnout when you work remotely. This can help you manage your time effectively and achieve your goals more efficiently.

Manage your environment

Managing your environment is an important part of managing your time effectively when you work remotely. By creating a dedicated workspace and minimizing distractions, you can stay focused and avoid wasting time.

To manage your environment when you work remotely, create a dedicated workspace. This could be a separate room or a designated area in your home where you can work without distractions. Make sure your workspace is comfortable and well-lit, and set it up with everything you need to get your work done, such as a computer, printer, and office supplies.

Another way to manage your environment when you work remotely is to minimize distractions. This could include turning off notifications on your phone or computer, closing unnecessary tabs or programs, and letting people know you are working and not to be disturbed. You may also want to consider using noise-cancelling headphones or a white noise machine to block out external distractions.

By managing your environment and minimizing distractions, you can stay focused and avoid wasting time when you work remotely. This can help you manage your time effectively and achieve your goals more efficiently.

Schedule breaks and time for physical activity

Scheduling breaks and time for physical activity is an important part of managing your time effectively when you work remotely. By taking breaks and exercising regularly, you can recharge and avoid burnout, which can help you stay focused and productive.

To schedule breaks and time for physical activity when you work remotely, consider setting aside specific times for these activities in your schedule. For example, you might take a short break every hour to stretch or go for a walk, and schedule a longer break or exercise session in the middle of the day.

There are many different types of breaks and physical activities you can choose from. Some options might include going for a walk or run, practicing yoga or meditation, or participating in a group fitness class. Whatever you choose, make sure to choose activities that you enjoy and that help you relax and recharge.

By scheduling breaks and time for physical activity, you can recharge and avoid burnout when you work remotely. This can help you manage your time effectively and achieve your goals more efficiently.

Communicate effectively with team members and stakeholders

Effective communication is an important part of managing your time effectively when you work remotely. By communicating clearly and efficiently with your team members and stakeholders, you can avoid misunderstandings and stay on track with your work.

To communicate effectively with your team members and stakeholders when you work remotely, there are several things you can do:

Use clear, concise language: Avoid jargon or technical terms that might not be familiar to everyone, and use simple, straightforward language to convey your message.
Use visual aids: When possible, use visual aids like charts, graphs, or slides to help illustrate your points and make your message more clear.
Use video conferencing: Use video conferencing tools like Zoom or Skype to communicate face-to-face with your team members and stakeholders. This can help you build rapport and improve communication.
Follow up: After a meeting or conversation, follow up with a summary or next steps to make sure everyone is on the same page.

By communicating effectively with your team members and stakeholders, you can avoid misunderstandings and stay on track with your work. This can help you manage your time effectively and achieve your goals more efficiently as a remote worker.

Stay organized

Staying organized is an important part of managing your time effectively when you work remotely. By keeping your work and personal life organized, you can avoid wasting time looking for things and stay focused on your tasks.

To stay organized when you work remotely, there are several things you can do:

Create a system for organizing your files: Use a file naming convention and create folders to keep your files organized and easy to find. You can also use cloud storage tools like Google Drive or Dropbox to store and access your files from anywhere.
Use task management software or apps: Use tools like Trello{:target="_blank"} or Asana to create and manage your tasks, set deadlines, and track progress.
Declutter your workspace: Keep your workspace clean and organized by decluttering regularly. This can help you stay focused and avoid distractions.
Set boundaries: Set clear boundaries between your work and personal life by creating designated work and non-work areas in your home.

By staying organized, you can avoid wasting time looking for things and stay focused on your tasks. This can help you manage your time effectively and achieve your goals more efficiently as a remote worker.

Conclusion

Working remotely can present challenges when it comes to managing your time effectively. By using time management techniques like setting clear goals and priorities, creating a task list, using the Pomodoro Technique, managing your environment, scheduling breaks and physical activity, communicating effectively with team members and stakeholders, and staying organized, you can stay focused and avoid burnout.

Remember that every person is different, so it's important to find time management techniques that work for you. Experiment with different techniques and tools to find what works best for you, and don't be afraid to adjust your approach as needed.

By managing your time effectively, you can achieve your goals more efficiently and enjoy the benefits of working remotely.

5 Ways Startups Can Use AI Today to Grow Rapidly

Rex Anthony — Tue, 01 Nov 2022 10:55:00 +0000

Everyone has a plan till they get punched in the mouth. — Mike Tyson

Ever since the very extensive work on artificial intelligence, done in the middle of the 20th century by Alan Turing, the popularity of AI has spread far and wide. Today, these advancements are helping businesses all over to world differentiate themselves and innovate at a rapid pace that has never been seen in history.

Indeed, the popularity and success of strong brands like Coca-Cola, Amazon, Netflix, Google, and many others depend largely on how they have harnessed AI in their business processes.

AI technology has been a game changer for businesses all over the world. This was exclusive to big companies but this is no longer the case. Small companies, most especially startups, now can use AI in their products and services to grow their businesses rapidly and compete favorably.

As the owner of a startup business, you want to manage your capital to invest it in areas that will be profitable to your business. This means cutting costs by making use of AI in those areas that are necessary. AI can help you in various aspects of your startup from ideation, product development, sales, and marketing.

In this post, I will outline 5 tools provided by copy.ai that you can use when you are just beginning to form your startup. These tools will save you useful resources such as time and money and they will give you the boost to rapidly kickstart your startup growth.

To get started, sign up to copy.ai here.

Copy.AI Startup Tools

These consist of tools that you can use to create content for your startup business, they consist of the following

Audience refiner
Brand mission
Brand voice
Motto generator
Value proposition

How to use Copy.ai to discover your Target Audience

Copy.ai has a tool that enables you to identify your target audience as a startup business. It is estimated that businesses spend about 37 billion dollars to show ads to people who are not interested in their product or service.

As a startup business, you need to make sure that you spend your money as efficiently as possible. It is easy to get caught up in how great your offering is that you fail to understand the people that will be using your product at the end of the day.

There are several advantages to knowing who your target audiences are such as

It helps you to create a more effective marketing plan
It helps you to build rapport with your target audience and communicate more effectively
It enables you to create a buyers persona
It makes it easier to find and connect with the right people
It eliminates false expectations about your audience
It provides you with pertinent information to tailor your product to your audience's requirements

Finding your target audience is crucial to building your business as a startup.

To use the Audience refiner tool by copy.ai, perform the following steps

On the left toolbar, search and click on Startup Tools > Audience Refiner
Describe your audience with at least 15 words or more.
Finally, click on create content

How to use Copy.ai to create a Brand Mission

Most businesses have a mission and vision statement. This describes in clear terms what the business wants to achieve, who they want to support, and why they want to support them.

This statement keeps you focused on where it is that you want to carry your business. Coming up with these statements can be a daunting task requiring a lot of time, deep, and sober reflection.

:{"type":"videoEmbed", "src":"https://www.youtube.com/embed/5e61lCFpH2E", "title":"YouTube video player", "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}
...

Copy.ai enables you to create multiple brand mission statements that can help you in the process of coming up with one for your business, saving you some time in the process.

To use the brand mission tool by copy.ai, perform the following steps

On the left toolbar, search and click on Startup Tools > Brand Mission
Enter the name of your business or brand
Enter a description of your brand, audience, and product/service. The more content you provide, the better the output that is generated
Pick the tone that describes how you want the brand mission to be perceived
Finally, click on create content

How to use Copy.ai to create a Brand Voice

Your brand voice is the personality that your brand assumes. It consists of a couple of words that sum up the principles that the brand is defined upon. A strong and memorable brand voice can help you to connect with your target audience and stand out from other competitors in your space.

Your brand voice does not change and is reflected in every aspect of your business both online and offline. Align your brand voice with your business mission and vision statement to maintain consistency.

To use the brand voice tool by copy.ai, perform the following steps

On the left toolbar, search and click on Startup Tools > Brand Voice
Enter the name of your brand
Describe your brand, audience, and product/service. The more content you provide, the better the output that is generated
Finally, click on create content

How to use Copy.ai to create a Motto

Your business motto or slogan is a phrase that describes your brand. It should be short and memorable. A good slogan can increase brand patronage in most instances as can be seen by companies like Stella Artois. It signifies the image that the business wants to portray to its audience. For example

Disneyland: The happiest place on earth
Nike: Just do it
BMW: The ultimate driving machine
Uber: Move the way you want
Kentucky Fried Chicken: Finger-lickin' good

To use the motto generator tool by copy.ai, perform the following steps

On the left toolbar, search and click on Startup Tools > Motto generator
Enter the name of your business/brand
Describe your brand, audience, and product/service.
Select the tone with which the AI will generate the output
Finally, click on create content

How to use Copy.ai to create a Value proposition

Your value proposition is your promise to your customers or a particular market segment. It should be simple, easy to understand, and consistent with your brand voice.

A successful value proposition can help you convert a potential client into a paying customer.

To use the value proposition tool by copy.ai, perform the following steps

On the left toolbar, search and click on Startup Tools > Value proposition
Enter the name of your business/brand
Describe your brand, audience, and product/service.
Select the tone with which the AI will generate the output
Finally, click on create content

Conclusion

It takes a lot of time in starting a business. There are so many different factors to consider and implement without even looking at the initial idea itself. But with the help of machine learning and artificial intelligence, you can significantly speed up the initiation of your startup.

Today, AI is more accessible than ever, and as a startup owner, I have outlined 5 tools that you can use to kickstart your business on the right track.

AI tools for startups are all about enhancing efficiency and reducing time spent. If you haven't already, sign up here to take advantage of this opportunity with Copy.AI.

How to Upload a file to GraphQL with VanillaJS

Rex Anthony — Mon, 01 Aug 2022 17:54:00 +0000

File upload is a feature that is very easy to implement in rest API but when it comes to sending a file to a GraphQL server, there is no standard way to go about it.

In this article you will learn the widely accepted method of implementing file upload which is becoming increasingly popular in new apps. The technique follows the specification by @jaydenseric.

It works similar to REST and is intuitive to use. Most examples that you will find online will use react, making use of the graphql-upload-client to implement file upload to a GraphQL server. In this post, I will not be using any dependency client. I will upload a file to a GraphQL server by making use of Vanilla javascript. Hopefully this article helps you to determine what the graphql-upload-client library is doing under the hood.

I will describe how to upload a file to a GraphQL server by making use of the following server dependencies

express
apollo-server-express
graphql-upload

These are the only dependencies that we will be using. We will run our application in node js with the dependencies above.

express is a server that we use to serve our application to the web.
apollo-server-express will add the graphql capability to our application
graphql-upload is a schema type for the uploaded file in graphql

Let's Get Started

We will begin by setting up our server to receive graphql upload requests.

Firstly, make sure you have node installed on your system, then create a new empty directory and initialize the nodejs application by typing the following into the command prompt/terminal

npm init -y

This will create a package.json file which serves as your nodejs application config file.

Next, install the following server dependencies

npm install express, apollo-server-express, graphql-upload

This will install express,apollo-server-express and graphql-upload dependencies into a new folder called node_modules, the package.json file will also be updated with a new entry for the installed dependencies.

Next, create a new file called app.js. In this file, you will enter the following to import the dependencies that you installed above

require("dotenv").config();
const { ApolloServer } = require("apollo-server-express");
const { graphqlUploadExpress } = require('graphql-upload');
const express = require('express');
const schema = require('./schema');

async function startServer() {
    const server = new ApolloServer(schema);
    await server.start();
    const app = express();
    // This middleware should be added before calling `applyMiddleware`.
    app.use(graphqlUploadExpress());
    server.applyMiddleware({ app });
    app.use(express.static('public'));

    app.listen({ port: process.env.PORT }, () => {
        console.log("SERVER LISTENING ON PORT " + process.env.PORT);
    });
}
startServer();

The require("dotenv").config() is used to load the environment variables from the .env file.

We import the apollo-server-express and the graphql-upload into app.js. We also require a file called /schema. This will load the schema/index.js, which will be used to define the schema for our graphQL application.

The folder 📂 structure will look like this

In the schema/index.js file, you fetch the data from schema.graphql using the built in node js fs dependency as shown below

const { typeDefs } = require('./typeDefs');
const resolvers = require("./resolvers");

module.exports = {
    typeDefs,
    resolvers
};

Here we load the type definitions and resolvers from their respective folders.

Here the schema for our graphQL application defined in schema/typeDefs/schema.graphql

scalar Upload

type File {
  url: String!
}

type Query {
  hello: String!
}

type Mutation {
  singleUpload(file: Upload!): File!
}

The query is not really important for file upload, but is required by graphql so we leave it there.

The upload scalar is the type of our uploaded file.

From the above, you can see that we have one query called hello and a single mutation called singleUpload which we will use to upload our file to the graphql server. The response from this mutation is a URL path to the uploaded image.

Here is schema/typeDefs/index.js

const { gql } = require("apollo-server-express");
const { join } = require('path');
const fs = require('fs');

const file = fs.readFileSync(join(__dirname, './schema.graphql'), 'utf8');

const typeDefs = gql `${file}`;

module.exports = { typeDefs };
`; 

module.exports = typeDefs;

Here, we simply load the schema and return it.

In resolvers/index.js, we have the following

const path = require('path');
const fs = require('fs');
const { GraphQLUpload } = require('graphql-upload');

module.exports = {
    Upload: GraphQLUpload,
    Query: {
        hello: () => "Hello World!"
    },
    Mutation: {
        singleUpload: async(parent, { file }) => {
            const { createReadStream, filename, mimetype, encoding } = await file;
            const stream = createReadStream();
            const pathname = path.join(__dirname, `../../public/images/${filename}`);
            let out = fs.createWriteStream(pathname);
            await stream.pipe(out);

            return {
                url: `http://localhost:4000/images/${filename}`
            };
        },
    }
};

javascript
Here, is where we handle the file upload. We restructure the file and store the image in our local machine in the public directory of our application.

That's basically it for our backend.

The front end

The front end will be a very simple HTML and javascript app with a file upload functionality. We have a simple upload input which will enable you to select an image file from your local file system and upload it to the graphql server that we have just created.

Let's get started.

Here is the HTML and Javascript for the front end. We have placed them together in the same file
index.html

< html >

< body >
    < form method="post" >
        < input id="file" type="file" name="upload" / >

        < input type="submit" / >
    < / form >
< / body >

< / html >

< script >
    window.onload = () => {
        let file = document.getElementById("file");
        file.onchange = async(event) => {
            let file = event.target.files[0];
            const formData = new FormData();
            formData.append("operations", `{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { url } }", "variables": { "file": null } }`);
            formData.append("map", `{ "0": ["variables.file"] }`);
            formData.append("0", file);
            for (var value of formData.values()) {
                console.log(value);
            }

            try {
                let res = await fetch("http://localhost:4000/graphql", {
                    method: 'POST',
                    body: formData
                });

                let json = res.json();

                console.log(json);
            } catch (err) {
                console.error(err);
            }
        }
    };
< / script >

This is a very simple front end.

The mutation that sends the uploaded file is as shown below

mutation ($file: Upload!) { 
    singleUpload(file: $file) { 
        URL 
    } 
}

With the following variables

{ 
    "0": ["variables.file"] 
}

We submit the data to the graphql server with a formData which we create by appending the mutation in the operations and the variables in the map. You can upload multiple images in the same way, by incrementing the index of the variables from 0,1,2 and so on.

We first listen for an unchanged event on the file input which is triggered after selecting the file to be uploaded. We get the binary file and append it to the form that we created dynamically, we then send the form to your graphql server just like we would with a normal rest upload.

Our server will process the request and determine what mutation should handle the request based on the value that we passed to it.

Wrapping up

File upload to a graphql server can be very easily implemented with the apollo-server-express dependency provided by the apollo. You can also implement it with the apollo server.

In this tutorial, we have used the apollo-server-express, because it enables us to access the uploaded image from the public directory.

How to Auto Generate a Youtube Video Script with AI

Rex Anthony — Sun, 20 Mar 2022 23:32:02 +0000

As a youtuber, you understand the need to create high-quality video content at scale in a short period of time.

You know that video content production takes time. From planning, scripting, shooting to post-production, there are a lot of things that can slow down your pace.

This can reduce your output which can hurt your rankings on youtube. This is because youtube's algorithm reward creators that consistently publish content by giving them greater exposure and rankings.

In this article, I am going to show you how to use an AI to auto-generate a youtube video script for your channel. I'll break this down for you in a way that even if you have no experience writing scripts, you'll learn everything you need to know to get set up. This will save you time and help you create video scripts that captivate your audience and earn you more subscribers.

Why do you need a youtube script?

Have you ever noticed that some videos ranking on YouTube have higher click-through rates compared to others? The reason for this is that the video has an interesting thumbnail, title, description, and scripting.

If you can write a script that hooks your audience throughout the first 15 seconds of your video, they have a greater chance of sticking around and watching the video through to the end and subscribing to your channel.

The importance of scripting your videos goes far beyond having words to say when it comes time to shoot the video. Instead, a script is used to create the concept of your video in written form. It gives you a better idea of the direction you’d like to go with your content creation strategy.

Whether you'll simply sit back and chat with your audience or if there will be some acting involved. All this is geared towards presenting your content in a form that is appealing to your audience.

A youtube script has the following elements

Scene descriptions: If your video is broken down into scenes, in this section you will describe the scenes to provide context for filming.
Dialogue: In this section, you will describe what the characters in your video are going to say.
Directions: In addition to speaking, your characters need to act and assume various personas. They might move around a space and perform various actions.
Camera cues: Instructions for how the video should be filmed.
Post-production notes: Descriptions of how the video will be edited in post-production.

What if I told you that there is a way to generate a script for your next YouTube video with just a few clicks?

How to use AI to auto-generate a video script for youtube

Several AI writing tools can help you to generate a script for your youtube video. In this section, we are going to go through a couple of them to see their features, pros, and cons.

1. Copy.ai

This is an AI copywriting tool that is designed for a bunch of use cases. The AI uses GPT-3 technology to produce high-quality auto-generated content.

Copy.ai enables you to use the AI for free with 10 free credits every month for registered users. This is renewed monthly.

It has a large collection of tools, which are grouped into the following categories

Digital Ad copy
Startup tools
Website copy
Blog tools
Email/Letter
Social media tools
Sales copy
Writing tools
Brainstorming Tools
Personal tools

How to use Copy.AI to create a video script for YouTube

The first thing that you need to do is to sign up for an account. If you already have an account, then you can log in.
Create a project or skip.
In the sidebar, search for "youtube" in the tools search box. You will be presented with a couple of tools for youtube. Select the youtube description intro
Type in the title of your video and a short description of what your video is about.
Click on create copy and wait a few seconds while the ai generates a handful of descriptions for you.
Finally, go through the auto-generated list by the ai and select the ones that you will love to use for your script.

2. Simplified.co

Simplified is a web app for social media management. The app enables you to create, collaborate, design, write marketing copy, create videos, and publish to social media.

Simplified.co has a free plan that gives you access to an AI writer. You also get access to 30+ AI copywriting templates, collaboration tools, 1GB of workspace storage, and a lot more.

It has 3 AI writing tools categories

Long-form writer
Short-form assistant
AI designer

How to use Simplified.co to create a video script for YouTube

The first thing that you need to do is to sign up for an account. If you already have an account, then you can log in.
Click on the AI writer and select the Long-form writer
Start typing in the title of your youtube video
Finally, from the AI assistant tab, select a template such as Blog introduction and click on Generate. This will create multiple suggestions which you can select to add to your content.

3. Chibi.ai

Chibi.ai is an ai powered auto-complete writing web application that helps you to overcome writer's block by completing your text and as a result giving you ideas on your content flow.

Chibi.ai is free to use with a 2000 word limit per month which renews on the 1st of every month.

How to use Chibi.ai to create a video script for YouTube

The first thing that you need to do is to sign up for an account. If you already have an account, then you can log in.
Click on New document
Write your youtube video title and your video description
To let the AI complete your text, click on a template such as Intro. The AI will scan through your text and generate content based on what you are currently writing about.

4. Rytr.me

Rytr is an AI writing assistant that helps you create high-quality content, in just a few seconds

Rytr is free to use with a 5000 character limit per month.

How to use Rytr.me to create a video script for YouTube

The first thing that you need to do is to sign up for an account. If you already have an account, then you can log in.
Click on the use case drop down and choose Video description.
Write your youtube video title into the input field
To let the AI complete your text, click on Ryte more.

5. ShortlyAI.com

ShortlyAI is a writing application that has been designed to help you write better and generate better blog posts. It has a very simple UI (user interface) but is surprisingly powerful.

Unlike the others, ShortlyAI is not free and requires you to pay either a monthly or yearly subscription. Click here to check the current pricing.

How to use ShortlyAI to create a video script for YouTube

The first thing that you need to do is to sign up for an account. If you already have an account, then you can log in.
Click on writing an article/blog
Write your youtube video title and your video description
To let the AI complete your text, click on Write for me. The AI will scan through your text and generate content based on what you are currently writing about.
Finally, you can choose to undo or edit the content

Conclusion

In this article, we have discussed how to use AI to generate the scripts for your next YouTube video content. We have also looked at 3 different tools that would help you to get the script for your video.

It might not be easy to do it yourself, but if you've got a great idea for a video, have no fear. AI is here. And with a little bit of work on your part, you can have your very own script to use as a template for your amazing projects.

Let me know if you think I missed out on any of your favourite tools.

How to Sync Your Notes Across Multiple Devices

Rex Anthony — Wed, 23 Feb 2022 17:21:26 +0000

Are you one of those people who have half a dozen devices but only get to use one at a time? And every time you switch from one device to another, you are lost as your notes could be on any one of them?

Keeping your notes in sync online is a very easy task if you use the right tools.

I’ve spent years trying various syncing solutions – solutions that would make my life easier by syncing across all my devices regardless of differences in device manufacturer.

In this article, I will go over how to use an online web app called ShareTXT to enable you to synchronize your notes across multiple devices.

I used to have my notes on my laptop and after that, I used cloud services to synchronize and share them across all my devices.

The problem was that for the simple task of sharing one or two lines of a note, it was a very slow process. I wanted something way faster.

With ShareTXT, your notes get synchronized across all your devices in real-time as you type it into the application.

With it being an online application, you do not need to install any app on your devices. It works automatically out of the box without any setup.

Benefits of keeping your notes in sync

Syncing notes is important. It helps you have one source of truth across browsers, desktops, and mobile phones.

It is a great feature, especially when you're on the go. If you edit a note on your computer, all other devices will automatically update to reflect those changes.

Your notes can easily get disorganized especially if you have them in multiple places.

You can access your notes anywhere you want with a modern browser. You don't need to install any software on your computer or smartphone.

If you are on your computer, laptop, tablet, or phone and you have an internet connection, you also have access to your notes. Any changes you make will be updated instantly across all devices.

You can easily share your notes with others by copying them and pasting them into the other device's clipboard.

Synchronizing your notes is important

If you have a team of people contributing to the same set of notes.
If you have several devices and want to have a consistent experience across all of them.
If you're using multiple note-taking apps and want to switch seamlessly between them.

How to quickly sync your notes online

ShareTXT is an online web application that makes it incredibly easy and quick to sync your notes across multiple devices. You can get started in less than a minute.

How to sync your notes across multiple devices with ShareTXT

Using your web browser, go to sharetxt.live
Visit the same link on the other device that you want to synchronize your notes
Type or paste your notes into the input field.

As you begin to type your note, it automatically appears on the other device because the notes are synchronized.

You can have multiple devices synchronized by visiting the same link. The moment you begin to type or paste a text into the input field, it will automatically appear on all the devices.

You can also save your notes and access them from any device.

Simply login or "Claim a link" to create an account with your Google account or email address.

Since you are creating and managing your notes online, you can be sure that they will remain synchronized when you access them from any device.

Conclusion

In this day and age, we’re connected and our various devices 24/7. It makes sense that you’d want to save your notes on one device so you can access them on another.

Doing more with your notes is easy when you have them readily available across multiple devices.

ShareTXT is a platform for synchronizing your notes so you can take your notes with you wherever you go.

You can sync your notes and share your passwords or security codes safely and quickly across multiple devices in real-time and the best part is that it is free to use and works automatically without installing any apps.

Hopefully, this post has given you some ideas on how to easily keep your notes synchronized.

Do well to contact me with your thoughts. I'd love to hear from you.

How to Install GlitchTip on Ubuntu 18.04

Rex Anthony — Thu, 17 Feb 2022 03:07:02 +0000

GlitchTip is an application that helps you to track your applications up-time (up-time monitoring) and crashes.

After developing your application and release it to the world, GlitchTip enables you to keep track of events that happen as people use your application.

If an error occurs when a user is using your application, information about the error is sent to your GlitchTip deployment. This enables you to spot errors very quickly and take action to fix the error before more people experience that issue.

Rather than depending on your users submitting bug reports, you can quickly know the instant that an error is triggered by someone using your application.

What is GlitchTip?

GlitchTip is an open source re-implementation of the Sentry error tracking platform.

But unlike sentry, it is free to use.

You can setup and deploy it on your own VPS server. As we are going to do later on in this article.

After setting up the error tracking application, you need to insert some code into your application to send errors to your GlitchTip deployment. These are called SDKs.

GlitchTip currently has SDKs for applications created with the following technologies

C#
Cordova
Electron
Elixir
Go
Java
Javascript
Minidump
Native (C/C++)
Node.js
Objective-C
PHP
Python
React-Native
Ruby
Rust

You can checkout the full SDK documentation here.

You can have one GlitchTip deployment and have multiple applications sending error reports to it.

Install GlitchTip on Ubuntu 18.04

In this tutorial, we are going to be deploying GlitchTip on docker on an AWS VPS running a Ubuntu 18.04 server.

Requirements

Before you get started, please install

Docker
Docker-compose

Get the docker compose file

Create a directory in your root directory

$ cd ~
$ mkdir glitchtip
$ cd glitchtip

Next, create a file called "docker-compose.yml" in the current directory. I will be using nano which comes as a default in my server, you can also use vim

$ nano docker-compose.yml

In this file, copy and paste the docker-compose commands from here. It looks like this at the time of writing this article

version: "3.4"
x-environment:
  &default-environment
  DATABASE_URL: postgres://postgres:postgres@postgres:5432/postgres
  SECRET_KEY: change_me
  PORT: 8000
x-depends_on:
  &default-depends_on
  - postgres
  - redis

services:
  postgres:
    image: postgres:13
    environment:
      POSTGRES_HOST_AUTH_METHOD: "trust"
    restart: unless-stopped
  redis:
    image: redis
    restart: unless-stopped
  web:
    image: glitchtip/glitchtip
    depends_on: *default-depends_on
    ports:
      - "8000:8000"
    environment: *default-environment
    restart: unless-stopped
  worker:
    image: glitchtip/glitchtip
    command: ./bin/run-celery-with-beat.sh
    depends_on: *default-depends_on
    environment: *default-environment
    restart: unless-stopped
  migrate:
    image: glitchtip/glitchtip
    depends_on: *default-depends_on
    command: "./manage.py migrate"
    environment: *default-environment

On line 5, endeavor to change your SECRET_KEY to something more secure.
Also under the x-environment section at the top of the file, you can add more environment variables to GlitchTip such as GLITCHTIP_MAX_EVENT_LIFE_DAYS, REDIS_URL, DATABASE_URL and others.

Check out the list of environment variables here, under the Configurations subheading.

For our case, we will leave it as it is.

Next, save the file and type

$ docker-compose up -d

to create the application at port 8000.

Open your browser and go to your_ip_address:8000. You should see the GlitchTip login screen

Click on signup to register

After logging in, you will be taken to the dashboard where you can create an organization

Click on Create New Organization

Enter the name of your organization. I used "Rex Org" for mine.

After that is done, proceed and you will be taken to the organisation screen where you can manage your projects for this organisation

As you can see, there are no projects, so let us create a new project for our simple node.js application. Note that you can create a project for any type of application as I have listed in the SDKs above.

Next, click on "Create New Project".

Select the type of application that you want to monitor. In our case, we select Node.js

Next, enter the name of your application in Project Name and click on create a team where you can specify a slug for your team. In my case, I used rex-team as my team slug.

Finally, click on the Create Project button.

After the project is created, you will be taken to a screen which explains to you how to setup your application to start using GlitchTip as a monitoring system. In our case, we are using Node.js so it looks like this

Notice that we are now in the issues tab. Note the right hand side of the screen that shows a DSN link. We will need to use it in your application to send bug reports automatically whenever they happen to our GlitchTip deployment.

For now, we have our GlitchTip project setup and ready to listen for errors from our application.

Create a simple Node.js app and connect it with GlitchTip

Let us proceed with setting up a simple node.js app and adding an intentional error to see if it gets tracked by GlitchTip.

Go back to the terminal and head back to your home directory, make sure that you have node and npm already installed.

$ cd ~
$ mkdir app
$ cd app
$ npm init -y

We have created a directory called app, we entered into the directory and initialized this directory as a node.js directory for our application. We will now have a package.json file automatically created for us.

Next, we are going to install 2 dependencies

express
@sentry/node

$ npm install --save express "@sentry/node"

This will install an express server and a GlitchTip SDK for our node app which we will use to send error reports to our GlitchTip deployment.

After everything is installed successfully, our package.json file will be automatically updated with our dependencies

Next, create a file in the ~/app/ directory called index.js.

$ nano index.js

In this file we create 2 simple express routes. One with an error and another without an error. We also copy and paste our DSN url from our GlitchTip deployment to track for errors from our application.

Paste the following code into your index.js file

const express = require('express');
const app = express();

app.get("/", (req, res) => {
        res.json({ status: "success", message: "This is a GlitchTip test app" });
});

const port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`Listening on port ${port}`); });

Save the file and in your terminal type node index.js. You will get the following response Listening on port 3000.

Open your browser and go to http://your_ip_address:3000. You should see the following output

{
"status": "success",
"message": "This is a GlitchTip test app"
}

This means that your app is working fine.

Next, we are going to setup this simple app to fail on purpose and send that error to GlitchTip.

Edit your index.js file and update it with the following code

const express = require('express');
const Sentry = require("@sentry/node");
Sentry.init({ dsn: "http://1273aea6f3274bbaa26bec9e6d7ad511@localhost:8000/1" });

const app = express();

app.use(Sentry.Handlers.requestHandler());

app.get("/", (req, res) => {
        res.json({ status: "success", message: "This is a GlitchTip test app" });
});

app.get("/error", (req, res) => {
        throw new Error("My first GlitchTip error!");
});

app.use(Sentry.Handlers.errorHandler());

const port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`Listening on port ${port}`); });

We now have a route that throws an error when we visit the http://your_ip_address:3000/error endpoint.

Run the app again with node index.js and open your browser and visit the link http://your_ip_address:3000/error.

You should see that an error is thrown

Next, go back to our GlitchTip deployment and refresh the page.

You will now be able to see the error displayed in the issues tab.

That's it. You have now successfully integrated GlitchTip as a monitoring system for your application.

You can click on an error to inspect it and get information about how the error originated with a stack trace just as I have below

You can track when the error occured, how many times it has been reported, the last time it was reported and more information about the error such as the header data sent, node version and so on.

In addition to error tracking, you can also perform up-time monitoring with GlitchTip. It will occasionally send a ping to your application to keep track of its availability so that when your application stops working you can receive a notification and take action quickly.

How to Safely Share Passwords and Secrets Codes Online

Rex Anthony — Wed, 16 Feb 2022 10:50:57 +0000

I've been wondering how to securely share passwords and secret codes online between your devices using your browser, without having to install the same password manager app on multiple devices.

There are numerous reasons that this could be required, and there are various ways around it - some of these may also be more appropriate than others depending on what you're trying to achieve.

In this article, I will go over how to use an encrypted service called ShareTXT to enable you to safely share your IP address, password, hash codes, your mnemonic phrase, or any other secret code between your devices for free.

Password managers are expensive and are not the correct solution when you want to quickly share specific personal information that might be of value to other parties as not everyone will have the application installed on their device.

The solution that I am proposing will enable you to paste your passwords into the recipient's device without needing to install any app.

You don't even need to create an account or pay a fee to get started. The application is free to use.

Why you might need to share your password

In general, it is not a good idea to share your password with anyone else. Your password should be kept secret at all times.

Most companies have shared passwords for their documents or WiFi that they share with their employees as plain text documents.

This information tends to get into the hands of bad actors who can use it to infiltrate and sabotage your business.

Other reasons why you might need to share passwords would be to allow access to a shared resource such as a shared WiFi password, ssh keys, to share login information between your multiple smart devices.

How to secure your password before sharing

While preparing to share your password, take a few precautions to ensure that it is secure.

Create unique passwords: never use the same password for more than one account. This minimizes the risks to your other accounts in the situation that one account is compromised.
Create strong passwords: a good password will contain uppercase, lowercase characters, numbers, special characters/symbols. Try to make your passwords at least 8 characters or more.
Never share your passwords in plain text formats: this leaves you vulnerable and exposes you to several attack vectors.
Do not share your passwords to your email inbox: it is unencrypted and if you forget to log out, an attacker can simply copy your passwords and use them maliciously.
Setup two factor authentication: before sharing your passwords, ensure that you add another layer of security to protect your data. Most apps offer this option. It requires you to authenticate yourself multiple times before accessing a given resource.

How to safely share your password online

The best way to share your passwords is with an encrypted service. These services hash your passwords so that even if it is intercepted during transmission, your password can not be decrypted and will be useless to the attacker.

Sharing your passwords with ShareTXT

Using your web browser, go to sharetxt.live
Visit the same link on the other device that you want to share your passwords
Type or paste your password into the input field to share it between the connected devices

Data encryption occurs before your password is sent, it gets decrypted and displayed on the device after it is received.

ShareTXT enables you to "Claim a private link". This provides additional security and requires you to log in before sharing your private information.

You can log in with either your email or Google account to save and manage your passwords and secret codes.

Conclusion

Most people often look for apps such as password managers to help them share their password, and get them installed on all of their devices.

These apps are not free and require a subscription. For the simple task of sharing passwords, they are overkill, they break your flow, and are complicated to use.

What ShareTXT provides is a simple, quick, and secure way to share your passwords and secret codes between your devices for free.

We covered a lot of ground in this post, but I hope that you found it informative and helpful.

Good security practices can be difficult to keep up with, but they’re so important that we should all make at least the effort to keep ourselves safe. With the right tools, it’s not hard to do, either!

7 Ways to Get Paid as a Content Creator Working Remotely in 2022

Rex Anthony — Sun, 06 Feb 2022 15:36:39 +0000

The ability to make money online while working remotely is now the new normal. With the internet being ubiquitous, location doesn’t matter anymore. A good number of companies and startups offer a wide range of services that allow you to work from home.

As a content creator, there are several options to get paid. Most clients look for writers who accept payment via PayPal or bank transfer. While this is great, others prefer being paid via other methods.

Whatever your preference is, it’s good to know about the different ways you can get paid for your work as an online content creator.

As a content creator working remotely, you can get paid via

PayPal
Payoneer
Bank Transfer
Credit Card
Gift Cards
Check
Cryptocurrency

PayPal

I don't have a bank account, because I don't know my mother's maiden name. – Paula Poundstone

PayPal is an online payment system. It allows people to send money to each other over the Internet.

PayPal has an app that you can use to transfer funds and manage your funds from any location.

PayPal is easy to use. To receive money on your PayPal account, you will enter the email address your PayPal account is registered under into a field in the sender's PayPal account.

The sender will then enter the amount they want to send you and click a button to send the money. You will get an email alert when you've received the money.

Once you have received the funds, you can withdraw them into your bank account.

If you use PayPal to receive payments – particularly on eBay – then they will charge you anything between 5 and 10 percent of the total price.

Complaints from PayPal users report that their accounts have been frozen without warning. The company’s algorithms are constantly checking every transaction to look for unusual behavior which might be something as innocuous as a larger-than-usual sum being moved through its systems.

Also, PayPal may hold on to your money if you have a history of chargebacks. When this happens, they can hold on to your funds for up to 21 days to guard against the possibility of a problem with a transaction.

Payoneer

It may not always be profitable at first for businesses to be online, but it is certainly going to be unprofitable not to be online.

Another great option is Payoneer, which enables you to receive payment from anywhere in the world by simply using your corporate card.

In addition to the website, you can also use the Payoneer app on your phone.

It provides you with a credit card that is very easy to use, it works with almost all ATMs worldwide, you can send & receive the money very simple

After receiving the funds, you can withdraw them from any ATM close to you. If you do not have an ATM near you, then you can transfer the funds into your local bank account.

Payoneer offers receiving accounts via the Global Payment Service. This enables you to receive local bank transfers from companies and marketplaces in the US, UK, EU, Japan, Canada, Australia, and Mexico directly to your Payoneer account.

It also supports withdrawals to local bank accounts in over 150 countries and currencies.

With a Payoneer account, you can receive payments from the following online sites

Google
Youtube
ClickBank
UpWork
Fiverr
PeoplePerHour
IStockPhoto
99Designs
Amazon
Expert360
TeeSpring
Guru
ProBlogger
DailyMotion
GraphicRiver
DepositPhotos
SEOClerks

Payoneer is not supported by some online companies to receive payment.

Bank transfer

If money doesn't grow on trees, then why do banks have branches?

Payment by bank transfer is by far the most conventional way to get paid as a remote content creator.

A bank or wire transfer enables you to receive money to your local bank account from anywhere in the world.

To receive international payments, you need to provide the sender with your full name, address, postal code, account number, BIC/Swift code, IBAN, bank details such as your branch code, bank name, city, location code, country, country code, your account type and the location of the bank's branch that is closest to you.

Bank transfers would be convenient for remote content creators who do not have a credit card because after the transfer is sent and the funds settle in your account, you can go to a physical bank to request withdrawal of your funds.

From my personal experience of using bank transfers, it usually takes a couple of days after the transfer is initiated, for the funds to settle in your account. Usually about 3 to 4 working days not counting Saturdays and Sundays.

This means that you need to wait patiently and trust that the funds have been sent by the sender. The sender will usually send you proof of payment such as the bank receipt indicating that he has initiated the payment.

Bank transfers tend to come with huge charges for processing your payments and currency conversion, check with your local bank to find out how much they charge for processing your payments.

Credit card

I haven't reported my missing credit card to the police because whoever stole it is spending less than my wife. - Ilie Nastase

As an online content creator, you can create a website and set up yourself as a credible personality.

A website enables you to showcase your previous work to potential clients and track important metrics such as the number of your website visitors and so on.

As a site owner, you can also accept credit card payments from your clients.

To get started, you need to determine what type of credit cards you'll accept such as VISA, MasterCard, Discover, American Express, and so on.

Note that processing fees vary based on the credit card processor and transaction type.

There are 3 ways to accept credit card payments.

In person payments: In this scenario, your client is physically present with you. By giving you his credit card, you can process the payment with a card reader or POS device.
Over the phone payments: This is less secure, is more prone to fraud and as such, it incurs higher charges. In this scenario, your client shares their credit card with you over the phone. You then enter that information into a card reader to process the transaction.
Online payments: Credit card processing providers charge huge fees for performing fraud checks and verifying the card holder's account number. By far, the best way to accept credit card payments is with an online credit card processor like Stripe, Venmo, Wise, Skrill, and so on.

Gift cards

I Hope This Makes You Smile. You Deserve It!

A gift card is a sort of payment that can be used to make purchases at retail stores, gas stations, restaurants, and other designated locations.

Gift cards can be physical or digital. Many retailers both online and offline offer/accept gift cards. These cards make it convenient for customers to pay for their products with an in-store card reader or via an app to speed up the checkout process.

With gift cards, you can avoid credit card fees when sending/receiving payments from your clients.

The downside of a gift card is that it limits your purchasing power. This is because there can only be a limited number of retailers that accept certain gift cards.

As an owner of a gift card, you may need to pay a fee to reload money into the card. You may be charged a fee for inactivity if you fail to use the card.

Check

There's a way of transferring funds that is even faster than electronic banking. It's called marriage - James Holt McGavran

Although the usage of checks is slowly diminishing, checks still amount to a significant slice of transactions that take place daily.

As a content creator, the goal is to make it seamless for your clients to pay you without any hurdles. One way to accomplish this is by accepting all forms of payment, including checks, and allowing your clients to make a decision about what payment method they will prefer to use.

Although, inevitably, there is always a risk of a bounced check, here are some ways to go about reducing the likelihood of this happening

Do not accept an altered check
Do not accept a check with a P.O Box number
Verify the information on the check
Setup a policy to accept a check only with identifiable forms of ID
Accept checks with check numbers above 300. Any number below this indicates that the check belongs to a new account number and is likely to bounce.

Cryptocurrency

Gold has gone from 0 to $1850 in 5000 years. Bitcoin has gone from 0 to $57,000 in 10 years. Why would I own gold? - Bill Miller

Cryptocurrencies are becoming more popular as more businesses are accepting them as a form of payment.

It is less expensive to receive payments from your clients because cryptocurrencies do not need third-party verification.

Before a client sends you payment via a cryptocurrency, you need to provide him with your crypto wallet address. After the payment is sent, the transaction is verified and recorded on the blockchain. It takes a while depending on the speed of the blockchain network for you to receive your payment.

You don't need to worry about dealing with banks.

Some things to keep in mind when accepting payments with cryptocurrencies

The transaction is irreversible. This means that if a client requests a refund after making payment, you need to manually send back the payment. This requires bookkeeping effort on your part.
Cryptocurrencies are taxable in most countries around the world. Check your government's website for regulations regarding your ownership of cryptocurrencies.
Cryptocurrencies are still very volatile. This means that the value of your currency can change at any moment for better or for worse. Therefore, you should be cautious before investing all of your savings into cryptocurrencies and keep an eye out for trending news that may impact your earnings.

Conclusion

There are several ways for you to receive payments for your work as a content creator working remotely.

Online platforms like PayPal and Payoneer are more convenient for you and your clients and they simplify the process of receiving payments. The transaction fees are also lower compared to conventional banks.

As a content creator, the goal is to make payment seamless for your clients therefore accepting payment methods such as bank transfers, credit cards, gift cards, checks, and cryptocurrencies give them a choice of choosing the payment method that is convenient for them.

Now that you know how to accept payments from your clients, I have written an article that guides you on how to make money as an online content creator, check it out here.