In today's world of complex web applications, it's important to understand how the tools we use work under the hood. One such tool is the virtual DOM. The virtual DOM is a lightweight, in-memory representation of the actual DOM that allows for efficient updates and re-renders of the view when the underlying data changes. In this blog post, we will take a closer look at the virtual DOM, what it is, how it works, and why it is used in modern JavaScript frameworks such as React.Js. We will also explore the benefits of using a virtual DOM and how it can improve the performance of your web applications. By the end of this post, you will have a better understanding of the virtual DOM and how it can help you build better web applications.

What is the DOM and how is it different from a Virtual DOM?

The DOM (Document Object Model) is a tree-like structure that represents the elements on a web page. The DOM is created by the browser when a web page is loaded, and it allows developers to manipulate the contents of the page using JavaScript. Each element on the page is represented as a node in the DOM tree and the DOM provides an API (Application Programming Interface)  for accessing and manipulating these nodes.

A virtual DOM, on the other hand, is a lightweight, in-memory representation of the actual DOM. It is a JavaScript object that mirrors the structure of the actual DOM but it is not the same as the actual DOM. When the state of a web application changes, the virtual DOM is updated to reflect the new state and a diffing algorithm is used to determine the minimal set of changes that need to be made to the actual DOM.

The main difference between the DOM and the virtual DOM is that the DOM is a live representation of the web page and any changes made to it immediately affect the view, while the virtual DOM is a lightweight copy of the DOM and changes made to it will not affect the view directly, it needs to be reconciled to the actual DOM.

The virtual DOM works by keeping a lightweight, in-memory representation of the actual DOM. When the state of a web application changes, the virtual DOM updates its copy of the tree to reflect the new state and then uses a diffing algorithm to determine the minimal set of changes that need to be made to the actual DOM.

Here's a general overview of how the virtual DOM works:

When a web page is loaded, the browser creates the actual DOM and the JavaScript code creates a copy of the actual DOM, known as the virtual DOM.

When the state of the web application changes, the virtual DOM updates its copy of the tree to reflect the new state.

The virtual DOM then uses a diffing algorithm to compare the current virtual DOM with the previous virtual DOM. This algorithm determines the minimal set of changes that need to be made to the actual DOM.

Once the changes have been determined, the virtual DOM updates the actual DOM with a minimal set of changes. This is known as reconciliation.

The browser can then re-render the updated elements on the page, resulting in a change in the view.

The use of the virtual DOM allows for more efficient updates and re-renders of the view, as it minimizes the number of changes made to the actual DOM. This can lead to better performance in large, complex applications with many components that need to update frequently.

It's worth mentioning that not all frameworks or libraries use the same diffing algorithm or the same way to update the actual DOM, and some of them have different approaches such as keyed updates or asynchronous updates, but the goal of all of them is the same, to improve the performance of web applications by minimizing the number of changes made to the actual DOM.

Why is the Virtual DOM used in modern JavaScript frameworks?

Modern JavaScript frameworks use the Virtual DOM for several reasons, including:

Improved performance: The virtual DOM allows for more efficient updates and re-renders of the view by minimizing the number of changes made to the actual DOM. This can lead to better performance in large, complex applications with many components that need to update frequently.

Abstraction: The virtual DOM provides a high level of abstraction, allowing developers to build complex user interfaces without worrying about the underlying details of how the DOM is manipulated. This makes it easier to develop and maintain web applications.

Reactive updates: By using a virtual DOM, frameworks can detect when the state of the web application changes and automatically update the view accordingly. This allows for reactive updates, where the view is automatically updated in response to changes in the underlying data.

Server-side rendering: Some JavaScript frameworks use server-side rendering (SSR) to improve the performance of web applications. By using a virtual DOM, it is possible to generate the initial view on the server, which can lead to improved load times and better SEO (Search Engine Optimization).

Cross-framework compatibility: Because the virtual DOM is a standard way to handle updates to the view, it allows for greater cross-framework compatibility. This means that developers can switch between different frameworks or libraries more easily and that code can be more easily shared between projects.

All these benefits make the virtual DOM a powerful tool for building web applications and a key feature of modern JavaScript frameworks such as React, Vue.js, and InfernoJS. The virtual DOM allows developers to build fast, efficient and maintainable web applications, which is why it has become a popular choice among developers.

How do frameworks such as React.Js and Vue.Js use the Virtual Dom?

React uses a virtual DOM to efficiently update and render components when the underlying data changes. When a component's state or props change, React updates the virtual DOM to reflect the new state, and then uses a diffing algorithm to determine the minimal set of changes that need to be made to the actual DOM. This approach allows React to minimize the number of changes made to the actual DOM, which improves the performance of its web applications.

Vue.js, like React, also uses a virtual DOM to efficiently update and render components when the underlying data changes. In Vue.js, each component has a corresponding virtual node in the virtual DOM and when the component's data changes, the virtual node is updated and then a diffing algorithm is used to determine the minimal set of changes that need to be made to the actual DOM.

These frameworks use the virtual DOM to improve the performance of web applications by minimizing the number of changes made to the actual DOM. This can lead to better performance, particularly in large, complex applications with many components that need to update frequently.

In conclusion, the virtual DOM is a powerful tool that improves the performance of web applications by keeping a lightweight, in-memory representation of the actual DOM which allows for efficient updates and re-renders of the view when the underlying data changes. It is used in modern JavaScript frameworks such as React.Js and Vue.js for several reasons, including improved performance, abstraction, reactive updates, server-side rendering and cross-framework compatibility. With a better understanding of the virtual DOM, developers can build fast, efficient and maintainable web applications that provide better user experiences.

https://images.pexels.com/photos/1181703/pexels-photo-1181703.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

In today's world of complex web applications, it's important to understand how the tools we use work under the hood. One such tool is the virtual DOM.

The Jamstack (JavaScript, APIs, and Markup) is a modern web development architecture that has brought about a revolution in the software engineering industry. Here are ten ways in which Jamstack has made a difference:

Performance: Jamstack websites load quickly because they use static HTML, CSS, and JavaScript files that are pre-built and served from a CDN. This eliminates the need for dynamic server-side rendering, making websites faster and more reliable.

Scalability: Jamstack websites are designed to be scalable, as they are built with modern front-end technologies that can handle an increasing number of users with ease.

Security: Jamstack websites are more secure than traditional dynamic websites because they don't rely on a server-side component that is vulnerable to hacking attempts.

Cost-effective: Jamstack websites are less expensive to build and maintain because they don't require expensive servers or infrastructure. Additionally, the use of CDNs and cloud services makes it possible to host Jamstack websites at a fraction of the cost of traditional web hosting.

Easy Deployment: Jamstack websites are easy to deploy, as they don't require any special software or configuration. They can be deployed to a variety of hosting platforms, including popular cloud services like AWS and Google Cloud.

Flexibility: Jamstack websites can be built with a variety of front-end technologies, making it possible for developers to choose the tools and frameworks that best suit their needs.

Collaboration: Jamstack makes it easy for teams of developers to work together, as they can work on separate parts of a website simultaneously and then merge their work together at the end.

Improved Development Workflow: Jamstack's modular architecture makes it easier to develop, test, and deploy changes to a website. This results in a faster and more efficient development process.

Better User Experience: Jamstack websites offer a better user experience, as they load quickly, provide a consistent look and feel, and offer offline functionality.

Accessibility: Jamstack websites are more accessible, as they can be easily built to meet accessibility standards and provide a better experience for users with disabilities.

In conclusion, Jamstack has revolutionized the software engineering industry by offering a faster, more secure, and cost-effective way to build and deploy websites. Its modular architecture and flexible technology stack make it easy for developers to create high-quality websites that offer a better user experience.

https://images.pexels.com/photos/3912478/pexels-photo-3912478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

The Jamstack (JavaScript, APIs, and Markup) is a modern web development architecture that has brought about a revolution...

10 ways how Jamstack has revolutionized the industry

CSS (Cascading Style Sheets) is a language used for describing the presentation of a document written in a markup language. It is often considered hard by developers because it can be difficult to understand the various layout and positioning concepts, as well as the various browser inconsistencies that can arise.

One reason CSS can be hard for developers is that it is a visual language. Unlike programming languages, which have a set of logical rules and syntax, CSS relies heavily on the designer's eye and intuition. This can make it difficult for developers to understand how to create a specific layout or design, especially if they lack experience in design.

Another reason CSS can be hard is that it is a declarative language, meaning that developers describe what they want the layout to look like, rather than specifying how to create it. This can make it difficult to troubleshoot and debug issues, as developers need to understand the underlying layout algorithms and how they interact with the HTML elements in order to make changes.

Despite these challenges, there are ways for developers to get better at CSS. One is to practice, practice, practice. Building small projects and experimenting with different layouts and designs can help developers gain a better understanding of the language and its capabilities. Another way to improve is to learn from more experienced developers by following their code and reading their blog posts and articles.

Additionally, there are many resources available online such as tutorials, videos, and documentation that can help developers learn CSS. Developers can also use CSS frameworks such as Bootstrap and Foundation, which provide pre-built components and styles that can be used to quickly create responsive and mobile-friendly layouts.

In conclusion, CSS can be challenging for developers, but with practice and the right resources, they can improve their skills and become more proficient in creating beautiful and functional layouts.

https://images.pexels.com/photos/14553706/pexels-photo-14553706.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

It is often considered hard by developers because it can be difficult to understand the various layout and positioning concepts...

In the world of User Experience (UX) design, the ability to create engaging and effective products that connect with users on an emotional level is crucial. While the importance of UX design is widely recognized, the role that art education plays in fostering the skills and creativity needed for impactful UX is often underestimated. Art education however can play a critical role in helping UX designers create products that not only function well but also delight users. By promoting visual thinking, creativity, empathy, storytelling, and iteration, art education provides designers with the tools and mindset needed to create truly compelling user experiences. In this article, we'll explore how the five key aspects of art education can elevate UX design and improve the overall quality of digital products.

Visual thinking skills are essential for UX design and art education can help designers develop these skills. By studying art and design principles, designers can learn how to use colour, form, and composition to create visually appealing and effective user interfaces.

Creativity is an important aspect of UX design, as it allows designers to think outside the box and come up with innovative solutions to design problems. Art education fosters creativity by teaching students to explore different mediums, experiment with new techniques, and push the boundaries of traditional design.

Empathy is another critical skill for UX designers that art teaches. It allows them to understand and connect with their users. Art education can help designers develop empathy by encouraging them to consider the perspectives of different audiences and explore the emotional impact of design choices.

Storytelling is a powerful tool in UX design, as it allows designers to create products that tell a compelling narrative and resonate with users on a deeper level. Art education emphasizes the importance of storytelling, teaching designers how to use visual elements to create a narrative and evoke an emotional response.

Lastly, iteration is an essential part of both the UX design process and creating art.  It allows designers to refine and improve their products over time. Art education encourages iteration by teaching students to embrace the process of trial and error, experiment with different techniques, and constantly refine their work based on feedback and user testing.

In conclusion, art education can be a powerful tool for UX designers looking to create more engaging and effective digital products. By fostering skills such as visual thinking, creativity, empathy, storytelling, and iteration, art education provides designers with a deep understanding of the importance of aesthetics and emotional connections in UX. By prioritizing art education in UX design, we can create products that not only function well but also bring joy and delight to users. In an era where digital products are increasingly ubiquitous in our lives, the role of art education in UX design is more important than ever. With a strong foundation in art education, designers can create products that truly resonate with users and create lasting emotional connections.

https://images.pexels.com/photos/102127/pexels-photo-102127.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

While the importance of UX design is widely recognized, the role that art education plays in fostering the skills and creativity...

The importance of Art education in User Experience

Most times when I bring up contributing to open-sourced projects there are developers who treat it as a strange topic or something that they've heard of but never attempted. 

The majority of them think along this pattern, "So Jason, you're telling me that a developer is going to code a project and I have to find this project and suggest a way to make the project better?".

It also tends to lead to more questions such as:

Will it show up on my Github contributions?

Within this article, I am going to use my own experiences to answer these questions.

Open-sourced projects can be found in several places if you're looking. There may be a project that you use which needs to update its documentation, a website that you find helpful but it has a bug in the layout or a random project you discovered and have opinions on how it can be improved.

For this example, I will be using my contribution to Real World. Real World is a collection of projects developed using various technologies to achieve the same result, a basic website or application called Conduit.

I first heard about Real World in the Jamaican Developers Community's Telegram group through the founder himself, Oshane Bailey. Naturally, we were talking about the various Javascript Frameworks and the different syntax that they use. He later sent the link to Real World in the group so that we can better understand each framework through its use in an actual project.

Having got the link I decided to go through and explore the different technologies and how the same project can be built using each framework.

You can suggest a fix for anything that you perceive as an error. This may be a:

If you can explain what is wrong and how fixing it will benefit the project, you can suggest a fix.

Having gone through a few Real World projects, I came upon the solution done by Mutoe which uses Vue.Js, Vite, Pinia and Typescript to build the website. The first thing that caught my attention was the fact that the website had an issue with its CSS. The layout had a navigational bug in regard to scrolling.

A horizontal scroll was present which did not follow the design system of Conduit and was a clear bug. Even though this project was just a demo, I began thinking about SEO implications, performance issues and accessibility concerns which would be raised if it were in a production environment.

Having located an issue within the website, the next question is "Why should I fix it?". 

The answer to that is you don't have to and there are several reasons why you may not be able to fix an error that you find:

You don't want to clone the repo or examine the entire project


In this case, if you spot an issue you can simply report it as an issue on Github. Someone else will notice the issue you highlighted and work to resolve it.

I took on the task of fixing this issue myself because I had some free time when I found it. Moreover, CSS is my strongest language so I knew it would only take me 3 minutes to locate and fix the issue.

When contributing to open-sourced projects something that you should always have in mind is that it may take a while for your contribution to be acknowledged. People are passionate about their projects but just like you, they are dealing with everyday life. Don't feel discouraged if a couple of weeks go by without any word, I can assure you that they will get to it when they have the opportunity.

My contribution to the project was accepted and merged into the codebase.

However, there are a few reasons why a contribution may be rejected.

The contribution suggested was already planned 

The contribution suggested would have led to issues unknown to you

An example of when a contribution I made was rejected was with Next.Js. The issue was that their documentation for link tags did not address a use case presented so I suggested an update, however, my contribution would have been unnecessary with the launch of the next version of Next.Js.

Your contribution may be rejected but it may also be accepted. If it is accepted you will be the person responsible for making life easier for thousands of developers. Moreover, it may open you up to networking opportunities which can lead you to greater things.

Contributing to open source projects is always recommended.

This is the last question that is usually asked. Yes, it will appear in your Github contribution history.

However certain conditions must be made if you want to see a badge such as here:

Firstly, the contribution must be made to an organization. Contributions to user projects, such as my contribution to Mutoe's Real World project, do not award badges. Secondly, you must enable badges in the Github settings so that other people can see them.

In conclusion, you should now have a greater understanding of the process of contributing to open-sourced projects. You should know how to find a project to contribute to and what you may be able to add to the project. In addition, you should be more understanding when it comes to how long it may take for your contribution to be recognized and know what types of contributions will give Github badges. You are now ready to start contributing to open-sourced projects and the community.

https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

Most times when I bring up contributing to open-sourced projects there are developers who treat it as if it were a strange topic.

Guide for contributing to open sourced projects

User experience is an emerging field in the Caribbean, but what certification is required? My name is Jason Clarke, a software engineer and user experience advocate and within this article, I aim to provide you with the step-by-step process of getting certified as a UX/UI designer or developer in the Caribbean. I will be doing this by going through the process and documenting the necessary steps. If you are new to UX/UI, I recommend that you read my previous post on “Starting your UX/UI career in Jamaica” for more information on the topic. 

This article will detail my first-hand experience in acquiring certifications from the Interaction Design Foundation (https://www.interaction-design.org/). The Interaction Design Foundation is the largest international online design school. It was founded in 2002 and has over 130,000 graduates worldwide. Moreover, it is the industry-recognized leader in online design education and can open you up to great local and international opportunities.

Having read this article you will gain the necessary information needed to make an impactful step towards or advance your career in UX/UI.  

Signing Up for the Interaction Design Foundation

In order to join the Interaction Design Foundation and access their courses, you will need a paid membership. Membership provides you with a unique membership ID, access to all courses and several other benefits. All persons who seek to take a course from the Interaction Design Foundation will be required to become a member of their community. The image below details the membership prices however these are subject to change.

A quick note is that if you are a student you can also get a reasonable discount by selecting student membership. However, for this article, I will be selecting a Professional Membership.

Many persons have let me know that the membership prices may prevent them from signing up. In order to give everyone a fair chance, I have reached out to the Interaction Design Foundation and acquired a referral link. People who use this link to sign up will be given 2 FREE MONTHS which reduces the membership costs by 18%. I will also be awarded 1 extra month on my membership when someone joins using the link.

The link: https://www.interaction-design.org/learn-ux-design?r=jason-clarke 

Becoming a Member of the Interaction Design Foundation 

After you have selected a plan you will be brought to the purchasing page. You have the option of using various forms of payment such as Credit or Debit cards as well as Paypal. It should also be noted that the minimum membership period lasts for 1 year. 

After purchasing your membership, you will be given the opportunity to fill out your account details and confirm your email address.

Having done this, a membership certificate is sent to the verified email address. This certificate, a first of many, can be attached to your LinkedIn or downloaded to be placed in your portfolio, blog, resume etc.

After you have completed your profile and received your certificate, you will now have the ability to join the available courses. The selection however may seem overwhelming. The Interaction Design Foundation has over 30 courses, many of which specialize in specific areas of UX/UI such as accessibility design, mobile responsiveness or Human Computer Interactions however they include learning paths if you don’t know exactly where to get started. 

Selecting any of these paths gives you a step-by-step program to take you from a complete beginner to an advanced practitioner and this is the recommended process. I will however skip the foundation courses due to my history in UX and start learning Human-Computer Interaction and Design for the 21st century, both topics that interest me. 

Something that should be noted is if you sign up with a student membership, you will be limited to taking only 2 courses at a time. If you wish to pursue multiple courses simultaneously you will either have to upgrade your membership to Professional or pay an additional fee for the additional course.

A benefit of the Interaction Design Foundation is that you are not bound to one set path, you have the option to choose what you want to learn and when you want to learn it.

After you have selected a course that you would like to take, I recommend looking at the course outline so that you have an understanding of what is required, the time it would take and any deadlines you may have. After you have thoroughly reviewed the course, starting it is as easy as pressing the “Start Course Now” button.

Time is an important factor and many of these courses take an estimated 4 weeks to complete. the Interaction Design Foundation also limits the number of lessons you can take in the course. Each week, a new lesson is released, allowing you time to absorb the content of what is being taught instead of zooming through.

Certificates are earned by answering both multiple choice and open-ended questions. Multiple choice questions are marked instantly when you submit your answer however open-ended questions are marked by an instructor and in my experience, it usually takes a couple of weeks for them to be marked.

A tip for answering open-ended questions is to pay attention to what is asked and answer appropriately using relevant examples if you can. I also advise that you answer in a paragraph or two as short sentences provide little opportunities for big marks.

When answering the multiple choice questions it is important to pay attention to the lesson that it is on. Do not answer the questions before you have gone through the lesson or answer the questions before time. A new lesson may build upon or completely change something that was previously taught, so do not jump to conclusions.

In order to get your certificate, you need to score at least 70% in the course. Having scored 70%, you will have the option to generate your certificate by pressing the button that appears beside the certificate icon.

Doing so is however not recommended as you should always strive for excellence by achieving the highest score that you possibly can. Also, they give a disclaimer that states that you forfeit the chance for a higher score if you generate the certificate before you complete all the questions. As this is not reversible it may negatively impact you in the near future. My advice is to complete the course in its entirety before generating your certificate.

Your course is considered complete when all the questions that you have answered are graded. As stated before it may take a few weeks for the open-ended questions to be graded so don’t be tempted to claim an early certificate.

After waiting for the instructor to mark your responses you’ll be greeted by a new message.

You will now be able to generate your Course Certificate by clicking on the “Generate my Course Certificate now”  button. A page will be dedicated to your certificate.

On this page, you’ll be able to download your certificate and be given instructions on how to show your certificate on platforms such as LinkedIn. This is my certificate:

You will also be able to share the page using its own public URL, for example, this is the URL to my certificate: https://www.interaction-design.org/jason-clarke/certificate/course/de08b069-6473-45d1-a391-33dffb6700e3.

It might be long so I recommend bookmarking it for easy access especially if you’re going to be in an interview.

Congratulations! You are now equipped with the knowledge needed for getting certified as a UX/UI designer or developer in the Caribbean. This certification is however international and industry-recognized so it can open you up to global opportunities in the UX/UI space.

https://images.pexels.com/photos/3184419/pexels-photo-3184419.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

User experience is an emerging field in the Caribbean, but what certification is required?

How to get certified as a UX/UI designer in the Caribbean

After 30 commits and 2 branches, this website is now an installable PWA! A month ago I tried to turn this website into a PWA however I ran into a few problems with installability. The PWA technology was being picked by devices however it could not be installed. This was odd especially because the errors given were related to bad pre-caching. 

I didn't use Next's middleware, which tends to cause this issue, so I spent some time troubleshooting the issue. In total, it lead to 30 commits with fixes that didn't work from the build excludes to refactoring components and library integrations. Having realized that the issue might take more time to fix than anticipated, I left the feature to work on others.

Today I had some free time after dinner and decided to go over this PWA issue. I created a new branch and after around 10 minutes I realized what the problem was. The documentation suggested that the meta information be placed in either the _document.tsx or _app.tsx. Since I already had a <Head> in my _document.tsx due to Google Fonts, I decided to place the meta information in there. At the time I didn't think about the differences between how the _document.tsx and _app.tsx files would process the PWA generation but each has its own way of doing it.

Like with fonts, PWAs injected through the _document.tsx will only load for a single page. Processing it this way was bound to give errors. The fix was simply adding the meta information in the _app.tsx.

⚡And now this website is an installable PWA ⚡

https://images.pexels.com/photos/433452/pexels-photo-433452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

After 30 commits and 2 branches, this website is now an installable PWA!

I remember when I said I wanted to start interacting with developer communities. Attending local and international meet-ups was the first thing on my list.

This screenshot is from a Google Developer Groups (Memphis) meet-up I attended on July 22, 2021. It was a great event and networking opportunity, I enjoyed the atmosphere and appreciated all the knowledge which furthered my understanding of several topics.

I also received several Linkedin connections after the event and was able to help out a few persons. I provided a simple framework for learning and improving on CSS and Javascript techniques and gave some user experience insight. I've been attending meet-ups and giving back to the community ever since.

https://images.pexels.com/photos/4200831/pexels-photo-4200831.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

I remember when I said I wanted to start interacting with developer communities.

Throwback: Google Developers Group Meetup

Choosing a hosting provider for your Single Page Application is a vital step in ensuring the success of your project. Your hosting provider should be reliable, allow continuous integration via a version control platform such as Github and should allow advanced configuration such as the setting up environment variables.

Render is a hosting provider that I recommend for personal to medium-sized projects. It is a cloud-based platform that builds and runs your web apps while providing great benefits such as free TLS certificates, a global CDN, DDoS protection via Cloudflare, private networks, free teams and auto deployments from Github or GitLab.

Within this article, I will give you a step-by-step guide to deploying your Single Page Application on Render.

To create an account, you can visit their website at https://render.com/ and press the “Get Started” button in their top navigation bar or you can follow the link provided here: https://dashboard.render.com/register?next=/register. 

Render supports an array of sign-up methods and you can choose the one that is most appropriate for your situation. Personally, I use and recommend signing up with Github (or GitLab) as it provides a convenient way to get started while reducing the likelihood of extra configuration later on.

After you have logged in, you will be brought to your dashboard and this is where all the magic happens. You may notice certain services such as Background Workers, Cron Jobs and Blueprints, however, these are not necessarily needed when deploying your SPA. What you will be doing is creating a New Static Site, which is also the first option.

In case you're wondering “Why a static site, I want to deploy a SPA?” it comes down to the terms used by Render. Render classifies all websites that are cached on their CDNs as static sites and this includes HTML websites, SPAs and SSGs. By doing this they embrace the JAMstack philosophy that the frontend of a project should be separated from the backend, hence any communication between the two should be done through external API calls. A benefit of using Render is that the backend of your project can also be deployed on the service but that's for another article.

Having selected “New Static Site” you are brought to the project selection page. From this page, you will select which project you are going to deploy. Depending on your sign-up method, the page will look different. If you signed up with your email or Google, it will look like this.

As a JAMstack platform, Render allows you to deploy your project through continuous integration. Continuous Integration is the practice of automating the integration of code changes into a single software project. In simpler terms when you push an update to your version control platform such as Github, it triggers a new deployment of your website on Render with the changes from the update, so connecting your project to a Git workflow is required.

Having connected your project to a Git workflow, your project selection page should now look like this: 

From here you can search for and start the process of deploying your static site by clicking Connect.

In order to ensure that you grasp this concept, I have created both a React and Vue SPA which you can clone or fork to deploy on Render.

React: https://github.com/devJasonClarke/react-render-deploy 

Vue: https://github.com/devJasonClarke/vue-render-deploy

Having pressed the “Connect” button you are brought to the configuration page. Here you will enter the name of your project, the git branch which it should be deployed from, the project’s build command in yarn or npm and the publish directory which is the folder where the build will be placed.

You can select the name of the project, I only have one branch which is the main branch, the build command is “yarn build” or “npm run build” and the publish directory is “dist”. After entering these details you can press the “Create Static Site” button.

This brings you to the deployment page where you can see the logs of your project being deployed in real-time.

When everything is completed and your site is deployed on Render you will get a completion message in the deployment logs.

You will also be able to use the secure URL provided under the site name to view your project online.

Link: https://react-render-deploy.onrender.com/

Something that should be noted is that the deployment process for Vue and React is the same. As with React, having pressed the connect button you are brought to the configuration page. Here you will enter the name of your project, the git branch which it should be deployed from, the project’s build command in yarn or npm and publish directory which is the folder where the build will be placed.

You will also be able to use the secure URL provided under the site name to view the project online.

Link: https://vue-render-deploy.onrender.com/

Render supports the deployment of several frameworks which are listed here in their docs: https://render.com/docs/static-sites. The process for deploying them is the same as the examples given above.

Environment variables can be added to your project before deployment by clicking on the “Advance” button under “Publish Directory” and then filling out the necessary information.

It can also be added after deployment by selecting the environment option on the deployment page.

When adding new .env variables, a manual deployment is necessary for the variables to be added to your live project.

Congratulations 🎉, you are now equipped with the knowledge needed to deploy your own Single Page Application on Render. 

https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 

If you want to launch your website on a cloud based global CDN with DDoS protection, private networks and auto deploys from Git, this article is for you.

How to deploy your Single Page Application on Render

This is a fairly simple question, the portfolio was developed using:

From a technical standpoint, it's a server-side rendered JAMstack website. Quite ironic if you begin to break down what that means but nevertheless, very effective in theory and practice.

The code for this website is available on GitHub: https://github.com/devJasonClarke/Dev-Jason-Clarke-portfolio

https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

If you were curious as to what technologies were used to develop this portfolio, this article is for you.

What technologies were used to develop this portfolio?

My presentation on the school management system I developed for the Caribbean context. It was presented to the Jamaican Developers Community (JaD) on their Demo Day for September 2022.

School Management System Demo by Jason Clarke

https://images.pexels.com/photos/5905557/pexels-photo-5905557.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

Presented to the Jamaican Developers Community on their Demo Day for September 2022.

My JAD School Management System Presentation

Key: Enter your information in places highlighted in Italics.

git switch "branch name"  (this is the preferred method)

Deleting a branch that has been pushed to version control platform such as GitHub:

git merge "branch name you want to merge to current head"

git log "branch name" "other branch name"

https://images.pexels.com/photos/11035539/pexels-photo-11035539.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

If you want a cheatsheet for Branches in Git then this article is for you.

Before explaining who a UX advocate is, you should know what UX stands for. UX stands for User Experience and refers to how people interpret and interact with products such as software solutions.

A UX advocate is a person who speaks out for the users, their interpretations and opinions on the experiences they have while using a product. They may also put themself in the user’s shoes and look for ways to improve their experience while using a product. 

User experience advocacy is important if providing quality products is the goal. UX advocates assist designers by focusing on the users rather than the product or service itself. UX advocates should be unbiased and willing to base their opinions on observations they've made.  However, some UX advocates, like myself, take a scientific position using qualitative or quantitative methods to collect data to suggest product improvements.

https://images.pexels.com/photos/3184613/pexels-photo-3184613.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

If you've been wondering who exactly a UX adovcate is and what they do then this article is for you.

Empathy is seen as a good thing in HCI and User Experience however human difference is a significant issue which is often overlooked. Human difference refers to the disparity that individuals have in areas such as personality and cognitive ability. This becomes an issue when trying to develop a solution for someone who may be very different from you. For example, if you have perfect eyesight, you may be able to emphasize with someone who has bad eyesight however the solution you create may not be optimal for them. Moreover, additional factors such as if the person is introverted or extroverted will affect the effectiveness of your solution. This is because you lack the first-hand experiences and insight that they have.

Human difference tends to be overlooked because of empathy. Many people opt to put themselves in someone's shoes and try to create a solution for themself if they were in that particular situation. In a sense, this may even be a selfish approach as the truly disadvantaged people are not usually consulted.

https://images.pexels.com/photos/12936834/pexels-photo-12936834.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2

Empathy is seen as a good thing in HCI and User Experience however human difference is a significant issue which is often overlooked.

Yesterday I received a distinction for an industry-recognized user experience course I was taking. The course was "Design for the 21st Century" taught by Don Norman through the Interaction Design Foundation. I chose the course because the syllabus had interesting topics such as humanity-centred design, how to democratize design and the difference between wicked problems and complex socio-technical systems. 

These concepts are relevant to my line of work as they help me understand the different variables to consider when designing software. Moreover, they informed me on practical steps I can take to avoid common mistakes and pitfalls. Furthermore, Don Norman is the person who coined the term User Experience and served as Apple's user experience architect from 1993 to 1996. His knowledge, insight and research were truly world-class and the knowledge I've gained from the course is an invaluable asset that will surely be put to good use.

Latest Posts