<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Phanhie</title>
    <description>The latest articles on DEV Community by Phanhie (@phanhie).</description>
    <link>https://dev.to/phanhie</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1015548%2Fb2f588ad-8221-40e8-ad1c-a0885a5366cb.JPG</url>
      <title>DEV Community: Phanhie</title>
      <link>https://dev.to/phanhie</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/phanhie"/>
    <language>en</language>
    <item>
      <title>Build a Docs Site with MKDocs</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Thu, 03 Jul 2025 07:55:47 +0000</pubDate>
      <link>https://dev.to/phanhie/build-a-docs-site-with-mkdocs-413k</link>
      <guid>https://dev.to/phanhie/build-a-docs-site-with-mkdocs-413k</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;MkDocs Documentation Guide&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This beginner-friendly guide will help you create your first MkDocs site. &lt;/p&gt;

&lt;p&gt;It offers a detailed walkthrough of the entire process, from installation to customisation and deployment and simplifies the complexities involved, making it easier for you to build your MkDocs site from scratch.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;What You'll Learn&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;How to install MkDocs on your computer&lt;/li&gt;
&lt;li&gt;How to create and organise documentation pages using Markdown&lt;/li&gt;
&lt;li&gt;How to customise the look of your site with themes&lt;/li&gt;
&lt;li&gt;How to structure professional technical documentation&lt;/li&gt;
&lt;li&gt;How to publish your documentation online for free&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Who This Guide is For&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Individuals new to writing how-to guides or instructions&lt;/li&gt;
&lt;li&gt;Developers who want to explain their projects clearly&lt;/li&gt;
&lt;li&gt;Contributors to open-source documentation&lt;/li&gt;
&lt;li&gt;Anyone looking to build a portfolio showcasing their documentation skills&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Structure of the Guide&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This guide covers the following key topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Installation: How to install and run MkDocs locally&lt;/li&gt;
&lt;li&gt;Creating Pages: How to add new documentation pages&lt;/li&gt;
&lt;li&gt;Customising Theme: How to apply the Material theme&lt;/li&gt;
&lt;li&gt;Deployment: How to host your site with GitHub Pages&lt;/li&gt;
&lt;li&gt;FAQ: helpful tips and common issues&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Ready to Start?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Click on the &lt;a href="https://phanhie.github.io/Mkdocs---Docs-Site/" rel="noopener noreferrer"&gt;Build a Docs Site with MKDocs&lt;/a&gt; link to begin your journey!&lt;/p&gt;

</description>
      <category>documentation</category>
      <category>docsascode</category>
      <category>tutorial</category>
      <category>staticwebapps</category>
    </item>
    <item>
      <title>Markdown for Beginners</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Wed, 18 Jun 2025 10:15:32 +0000</pubDate>
      <link>https://dev.to/phanhie/markdown-for-beginners-5bbe</link>
      <guid>https://dev.to/phanhie/markdown-for-beginners-5bbe</guid>
      <description>&lt;h2&gt;
  
  
  What is Markdown?
&lt;/h2&gt;

&lt;p&gt;Markdown is a straightforward markup language designed for formatting plain text. The beauty of Markdown lies in its simplicity; it allows you to write in a way that's both intuitive and easy to read. This type of text can be conveniently converted into HTML, making it ideal for web content like articles, blogs, and documentation. With its user-friendly syntax, Markdown has become a popular choice among writers, developers, and anyone looking to create structured documents with minimal fuss.&lt;/p&gt;

&lt;h2&gt;
  
  
  Essential Markdown Formatting
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Headings
&lt;/h3&gt;

&lt;p&gt;Headings play a crucial role in organising any document. They help readers navigate through the content and make it easier to understand the structure of the material. In Markdown, you create headings using the hashtag symbol (#). The number of hashtags indicates the size of the heading—more hashtags mean a smaller heading. &lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To create a main heading, use one hashtag: &lt;code&gt;# Main Heading&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;For subheadings, use two hashtags: &lt;code&gt;## Subheading&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;For additional layers of subheadings, continue adding hashtags: &lt;code&gt;### Subheading 2&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keep in mind that adding a space after the hashtags and leaving blank lines before and after your headings enhances the document’s readability and visual appeal.&lt;/p&gt;

&lt;h3&gt;
  
  
  Paragraphs and Line Breaks
&lt;/h3&gt;

&lt;p&gt;Paragraphs in Markdown are simply blocks of text separated by one or more blank lines. For instance:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is the first paragraph.

This is the second paragraph.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you want to create line breaks within the same paragraph, you can do this by leaving a few spaces at the end of a line and then pressing Enter. This method maintains the flow of the text while creating a visual pause.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is the first line of text.  
This line will follow immediately after the break.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Emphasis
&lt;/h3&gt;

&lt;p&gt;Emphasizing text is essential for drawing attention to key points, making it stand out in the document. You can format text as bold, italic, or even both in Markdown. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Bold Text:&lt;/strong&gt; Use double asterisks (**) or underscores (__) around your text to make it bold. It is recommended to use asterisks for consistency.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Italic Text:&lt;/strong&gt; Add a single asterisk (*) or an underscore (_) to format your text as italic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bold and Italic Text:&lt;/strong&gt; To achieve both styles, wrap your text with three asterisks (***) or three underscores (___).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples of these formatting techniques include:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;**This text is bold.**  
*This text is italic.*  
***This text is both bold and italic.***

__This text is bold with underscores.__  
_This text is italic with underscores._  
___This text is both bold and italic with underscores.___
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Organizing Information
&lt;/h3&gt;

&lt;p&gt;Markdown simplifies the organization of your content through various tools like lists, code blocks, and block quotes, helping readers digest the information easily.&lt;/p&gt;

&lt;h4&gt;
  
  
  Lists
&lt;/h4&gt;

&lt;p&gt;You can create two types of lists in Markdown: ordered and unordered.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ordered Lists:&lt;/strong&gt; These are numbered lists where each item is preceded by a number and a period (.). The sequence doesn’t have to be perfect, as Markdown will automatically renumber the items for you.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. First Item
2. Second Item
3. Third Item
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Unordered Lists:&lt;/strong&gt; These lists use symbols like a dash (-), asterisk (*), or a plus sign (+) to denote items. Choose one style and keep it consistent throughout the document.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- First Item
* Second Item
+ Third Item
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Nested Lists:&lt;/strong&gt; You can also create lists within lists by indenting items either with four spaces or a tab.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Main Item  
    - Nested Item One  
    - Nested Item Two
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Blockquotes
&lt;/h3&gt;

&lt;p&gt;Blockquotes are a great way to highlight important quotations or sections of text. You simply start the line with the greater-than symbol (&amp;gt;). This is especially useful for citing sources or emphasizing key statements.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;gt; This is an important quote.
&amp;gt; It can extend across multiple lines for clarity.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can even nest blockquotes or incorporate other Markdown elements, like lists or code, within them, enhancing the flexibility and functionality of your document.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code
&lt;/h3&gt;

&lt;p&gt;Markdown provides an efficient way to include code snippets in your text, whether it's single lines of code or blocks of programming code.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Inline Code:&lt;/strong&gt; For short code snippets within your text, wrap the code in backticks (&lt;code&gt;text&lt;/code&gt;). For example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;To create a JavaScript function, you can use the keyword `function()`.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Code Blocks:&lt;/strong&gt; For longer sections of code, especially when illustrating a concept or providing a detailed example, you can create a code block. For instance:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;html&amp;gt;
    &amp;lt;body&amp;gt;
        &amp;lt;p&amp;gt;This is the body of the HTML document.&amp;lt;/p&amp;gt;
    &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Linking Content
&lt;/h3&gt;

&lt;p&gt;Links are a fundamental feature that helps connect your text to other web pages or sections, providing readers with easy access to additional resources.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Standard Links:&lt;/strong&gt; To create a link, enclose the link text in square brackets ([]) followed by the URL in parentheses ().
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Visit Google](https://www.google.com)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Adding Titles:&lt;/strong&gt; You can also add a title in quotes after the URL to provide additional context, which appears when a user hovers over the link.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Google](https://www.google.com "Go to Google")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;URL and Email Links:&lt;/strong&gt; It is straightforward to turn URLs or email addresses into clickable links by enclosing them in angle brackets.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;https://www.example.com&amp;gt;  
&amp;lt;example@email.com&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Markdown is a powerful yet user-friendly tool for creating well-structured documents. By mastering these fundamental aspects of Markdown, you can effectively format your text and enhance the readability of your work across various platforms. With practice, you'll be well-equipped to write clear and engaging Markdown documents that communicate your ideas effectively.&lt;/p&gt;

&lt;p&gt;Are you ready to start writing with Markdown?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>documentation</category>
      <category>html</category>
      <category>markdown</category>
    </item>
    <item>
      <title>How to Use Google Docs for Collaborative Writing</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Tue, 17 Jun 2025 20:35:56 +0000</pubDate>
      <link>https://dev.to/phanhie/how-to-use-google-docs-for-collaborative-writing-27ga</link>
      <guid>https://dev.to/phanhie/how-to-use-google-docs-for-collaborative-writing-27ga</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Collaborating in real-time has become simple and creative with Google Docs. This tool allows you to write and work with team members or friends on projects together. This article covers the basics of using Google Docs for collaborative writing, perfect for beginners tackling any project.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is Google Docs?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Google Docs is a cloud-based word processor for writing projects online. It is part of Google Workspace and works with Google Drive to manage your documents. You just need a Google account and an internet connection to get started.&lt;br&gt;
Google Docs supports real-time co-editing, letting you and others work on the same document at the same time. It automatically saves your work to your Drive, so you won’t lose anything. You can also check the version history to see changes and revert to previous versions as needed.&lt;br&gt;
Sharing documents is easy and secure. You can control who can view your document. Team members can leave comments and suggestions, and no software installation is required.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Setting Up A Google Docs Environment&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Creating a New Document&lt;/strong&gt;&lt;br&gt;
You can create a document in two ways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Go to drive.google.com. Click the "New" button in the top left, then select "Google Docs." Choose a blank template or pick one to edit from the list.&lt;/li&gt;
&lt;li&gt;Visit docs.google.com. Here, you can create a blank document or choose a template.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Naming Your Document&lt;/strong&gt;&lt;br&gt;
In the top left corner, add your document title. Choose a descriptive name; there are no limits on word or character count.&lt;br&gt;
&lt;strong&gt;Document Setup&lt;/strong&gt; &lt;br&gt;
Before writing, set up your document’s basic format. Select the font, size, line spacing, and paragraph spacing. You can also add placeholders or create an outline in a separate tab.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sharing And Permission&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Google Docs lets you share documents for real-time collaboration. Here’s how:&lt;br&gt;
&lt;strong&gt;Sharing Options&lt;/strong&gt;&lt;br&gt;
Click the share button in the top right corner. You can share a restricted link (only specified people can access it) or an open link (anyone with the link can view it).&lt;br&gt;
&lt;strong&gt;Setting Permissions for Collaborators&lt;/strong&gt;&lt;br&gt;
With an open link, you can set access levels for those with the link:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Viewer: Can only read the document.&lt;/li&gt;
&lt;li&gt;Commenter: Can read and add comments or suggestions. This role is great for reviewers or editors.&lt;/li&gt;
&lt;li&gt;Editor: Can make changes, add comments, and accept or reject suggestions. This is the main role for collaborative writers.
&lt;strong&gt;Adding Collaborators&lt;/strong&gt;
You can add collaborators with the same access as you using the share button. Just enter their email addresses or Google Group names and send a notification.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Best Practices for Permissions&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Grant Editor access to active writers.&lt;/li&gt;
&lt;li&gt;Use Commenter to provide feedback.&lt;/li&gt;
&lt;li&gt;Use Viewer for stakeholders who don’t need to edit or comment.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Collaborative Writing Features&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Real-time Co-editing&lt;/strong&gt;&lt;br&gt;
This feature allows you and your team to work together from different locations. You can see your collaborators’ edits and identify who is working on each section.&lt;br&gt;
&lt;strong&gt;Adding Comments&lt;/strong&gt;&lt;br&gt;
Collaborators can comment by highlighting text. They can use the "@" key to mention specific people and draw attention to points in the document. You can reply to comments and resolve issues once addressed.&lt;br&gt;
&lt;strong&gt;Suggesting Mode&lt;/strong&gt; &lt;br&gt;
In Suggesting Mode, collaborators can make changes as suggestions without altering the original document. Other collaborators can accept or reject these suggestions. This is ideal for proofreading and editing.&lt;br&gt;
&lt;strong&gt;Version History&lt;/strong&gt;&lt;br&gt;
You can view the history of changes made to your document. To access this, go to:&lt;br&gt;
&lt;code&gt;File &amp;gt; Version history &amp;gt; See version history.&lt;/code&gt;&lt;br&gt;
Here, you can see who made changes, revert to earlier versions, and label specific versions.&lt;br&gt;
&lt;strong&gt;Chat Feature&lt;/strong&gt; &lt;br&gt;
You can chat with collaborators for quick discussions directly within the document.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Collaborating Effectively&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Establish Roles and Responsibilities:&lt;/strong&gt; Clearly define who is responsible for each section and set deadlines.&lt;br&gt;
&lt;strong&gt;Communicate Clearly:&lt;/strong&gt; Use suggestions, comments, and chat for effective communication.&lt;br&gt;
&lt;strong&gt;Regular Check-ins/Meetings:&lt;/strong&gt; Hold brief meetings to monitor progress and discuss next steps.&lt;br&gt;
&lt;strong&gt;Use an Outline:&lt;/strong&gt; Create a clear outline to keep everyone on track and assign sections.&lt;br&gt;
&lt;strong&gt;Proofread and Edit:&lt;/strong&gt; Review your document multiple times to catch errors.&lt;br&gt;
&lt;strong&gt;Leverage Document Structure:&lt;/strong&gt; Use formatting features, like headings, to create an organised document that simplifies navigation.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Google Docs is effective for collaborative writing. It streamlines workflow, boosts efficiency, and improves communication, providing essential tools for team writing.&lt;/p&gt;

</description>
      <category>writing</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>career</category>
    </item>
    <item>
      <title>BECOMING A TECHNICAL WRITER IN 2025</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Fri, 06 Jun 2025 12:36:33 +0000</pubDate>
      <link>https://dev.to/phanhie/becoming-a-technical-writer-in-2025-176h</link>
      <guid>https://dev.to/phanhie/becoming-a-technical-writer-in-2025-176h</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;INTRODUCTION&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Have you ever struggled with a complex product and turned to an online guide or a manual for help? Or as a developer, designer, or data analyst, have you looked for videos or documentation to understand a new concept?&lt;br&gt;
These situations highlight the need for clear and easy-to-understand information, which is where technical writers come in. They create manuals, documents, and articles that make complex topics accessible.&lt;br&gt;
In this article, we’ll discuss what technical writing is, the skills needed to succeed, the various types of technical writing, and how to start a career in this field. Let’s get started!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;WHAT IS TECHNICAL WRITING&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Technical writing, in simple terms, refers to any type of writing that simplifies complex topics into a clear and concise format for a specific audience. Unlike other forms of writing, technical writing aims to explain complex technical concepts in a clear and straightforward manner. While it often focuses on topics related to IT, it can also cover areas such as scientific research, healthcare, and engineering.&lt;br&gt;
Technical writing is important because many people seek clarity and information on various subjects. For example, when I need to learn how to use a device I just purchased, I consult the manuals. Similarly, if I'm unsure about how to set up React, I refer to the React documentation. Therefore, technical writing is a highly sought-after skill that requires continuous learning. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;SKILLS REQUIRED TO BE A TECHNICAL WRITER&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Because technical writing isn’t just any form of creative writing, there are specific skills you need to excel in the field. Some of these skills include:&lt;br&gt;
&lt;strong&gt;Core Writing Skills:&lt;/strong&gt; A technical writer must be able to write in simple and clear terms. This involves structuring your writing to meet requirements and knowing how to organise straightforward texts in English or your preferred language.&lt;br&gt;
&lt;strong&gt;Technical Aptitude:&lt;/strong&gt; You should have a solid understanding of the subject you will be specialising in. For example, if you want to be an IT technical writer, it’s essential to have basic programming knowledge and a grasp of what you’re writing about. If you don’t understand the topic, you won’t be able to convey it effectively to others.&lt;br&gt;
&lt;strong&gt;Research:&lt;/strong&gt; Research is a critical skill in technical writing. Learning is fundamental, and you acquire knowledge by gathering information. Knowing how to search for the right resources and compile information on a specific topic is crucial for developing a clear understanding before you start writing.&lt;br&gt;
&lt;strong&gt;Software Proficiency:&lt;/strong&gt; Familiarity with various tools used in technical writing is essential. You need to know how to use and apply tools such as Grammarly, Google Docs, Notion, Markdown, and draw.io in your workflow.&lt;br&gt;
&lt;strong&gt;Communication Skills:&lt;/strong&gt; Technical writing is all about communicating knowledge in an easily understandable format. To be a successful technical writer, you need to learn how to express your thoughts clearly and concisely.&lt;br&gt;
&lt;strong&gt;Problem-Solving Skills:&lt;/strong&gt; A technical writer must be proactive and a good problem solver. You will likely encounter complex issues that require intuitive solutions. Additionally, a willingness to learn continuously is important in this role.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;TYPES OF TECHNICAL WRITING&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Technical writers create a variety of documentation for different purposes, some of which are: &lt;br&gt;
&lt;strong&gt;Technical articles:&lt;/strong&gt; These articles explain various topics in the technical field, aiming to inform readers about specific concepts within the tech industry.&lt;br&gt;
User Guides: These are manuals that instruct users on how to use a particular product or tool. They are usually concise, straightforward, and easy to understand.&lt;br&gt;
&lt;strong&gt;API Documentation:&lt;/strong&gt; This documentation provides information on how to effectively use an API. It is primarily intended for developers who wish to integrate the API into their workflows.&lt;br&gt;
&lt;strong&gt;Case studies:&lt;/strong&gt; This documentation involves researching and recording detailed information about a particular subject, person, organisation, or product over a period of time.&lt;br&gt;
&lt;strong&gt;Whitepapers:&lt;/strong&gt; These are in-depth reports that provide comprehensive information about a specific product, often to persuade readers to adopt that product or service.&lt;br&gt;
&lt;strong&gt;Business Proposals:&lt;/strong&gt; This is a document that outlines a specific offer, project, or service to a prospective client or partner, aiming to persuade them to engage with your business. Although not exclusive to technical writers, they may also write proposals related to technical solutions.&lt;br&gt;
&lt;strong&gt;Technical Report:&lt;/strong&gt; These documents detail the results of a project or technical research. They are often used to communicate findings, provide technical specifications, or offer updates on a project.&lt;br&gt;
&lt;strong&gt;UX Writing:&lt;/strong&gt; This involves creating the text and language that users interact with within a digital product or interface. It focuses on crafting clear, concise, and user-friendly content to help users navigate and understand a product or service.&lt;br&gt;
&lt;strong&gt;Standard Operating Procedure (SOP):&lt;/strong&gt; These are documented sets of instructions that describe how to perform specific tasks or processes consistently and efficiently within an organisation.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;HOW TO BE A SUCCESSFUL TECHNICAL WRITER&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Master Core Skills:&lt;/strong&gt; Develop excellent writing; focus on clarity, conciseness, and accuracy. Also, a solid understanding of technical concepts. Learn to use popular documentation tools, improve communication skills to work better with SMEs, and learn to gather information from various sources. Be willing to learn and read widely to expand your vocabulary and understanding of different writing styles. To learn about foundational technical writing, you can take Google’s Technical Writing Course. &lt;br&gt;
&lt;strong&gt;Create a Powerful Portfolio:&lt;/strong&gt; This is a compilation of your writing samples and is crucial for career growth. If you lack professional experience, create sample documentation for personal projects or open-source software. Showcase diverse samples: manuals, tutorials, API docs, etc.&lt;br&gt;
&lt;strong&gt;Practical Experience is Key:&lt;/strong&gt; Gain experience through personal projects, open-source contributions, or even sample documentation.&lt;br&gt;
&lt;strong&gt;Network &amp;amp; Build Your Presence:&lt;/strong&gt; Join communities, attend events, connect with people on a similar track as you, and build an online presence on platforms like Twitter or LinkedIn where you can share your work and engage with others in the field.&lt;br&gt;
&lt;strong&gt;Continuous Learning:&lt;/strong&gt; Stay updated with industry trends by following blogs, publications, and taking online courses to learn new skills. Always seek feedback, and continuously improve your knowledge&lt;br&gt;
&lt;strong&gt;Actionable Tips:&lt;/strong&gt;&lt;br&gt;
Practice daily writing and explore online technical tutorials for more knowledge&lt;br&gt;
Actively engage in online communities and dedicate time to learning and skill development.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;CONCLUSION&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The field of technical writing presents numerous opportunities for aspiring writers. You don't need to know everything to succeed; rather, a commitment to learning and effective communication is key. As technology evolves, the demand for clear documentation will only grow, making it essential for writers to stay informed and adaptable. It's an exciting time to pursue technical writing, with its endless possibilities ahead.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>technicalwriting</category>
      <category>documentation</category>
      <category>learning</category>
    </item>
    <item>
      <title>A PRACTICAL GUIDE TO GIT AND GITHUB FOR COLLABORATIVE TECH PROJECTS.</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Sun, 04 May 2025 11:19:38 +0000</pubDate>
      <link>https://dev.to/phanhie/a-practical-guide-to-git-and-github-for-collaborative-tech-projects-2kco</link>
      <guid>https://dev.to/phanhie/a-practical-guide-to-git-and-github-for-collaborative-tech-projects-2kco</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;INTRODUCTION&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;If you’ve ever participated in a large-scale tech project, whether in software development, writing, or any other field, you know collaboration is important for keeping everything running smoothly. Sharing tasks among team members is essential, and version control services like Git and GitHub have made this process easier than ever.&lt;/p&gt;

&lt;p&gt;Git and GitHub have eliminated delays and reduced errors in collaborative projects by enabling real-time collaboration. This means that you and your teammates can work together on a project simultaneously, which helps to avoid delays and ensures accuracy.&lt;/p&gt;

&lt;p&gt;This article is intended for both beginner and experienced developers, teams, project managers, and others involved in tech projects. It will cover the fundamentals of using Git for collaboration, explain how to understand GitHub, and outline best practices for working with GitHub and collaborating effectively.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;GIT VS GITHUB&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;What are Git and GitHub, and how do they differ? This question often comes up, especially among new developers. In simple terms, Git is a version control tool that allows you to track changes to files over time, whereas GitHub is a cloud-based platform where you can host your files in repositories on the web. This platform enables others to access and make changes to your files if granted permission.&lt;/p&gt;

&lt;p&gt;To elaborate, Git helps you manage and track changes in your code. It offers features like the ability to revert to previous versions and view the history of changes. On the other hand, GitHub acts as a storage solution for Git repositories, facilitating effective sharing and collaboration among developers on projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;SETTING UP YOUR LOCAL GIT ENVIRONMENT&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To set up Git on your local machine, whether you use macOS, Linux, or Windows, you will need to use the command line interface (CLI).&lt;/p&gt;

&lt;p&gt;When CLI is open, you can install Git on any operating system by following the installation guide: &lt;a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git" rel="noopener noreferrer"&gt;Install Git.&lt;/a&gt; &lt;br&gt;
After downloading and successfully installing Git, you should customise your Git environment to your preferences by setting your username and email for future commits. You can do this by following the respective guides: &lt;a href="https://docs.github.com/en/get-started/git-basics/setting-your-username-in-git?platform=mac" rel="noopener noreferrer"&gt;Set Username&lt;/a&gt; and &lt;a href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address" rel="noopener noreferrer"&gt;Set Email&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## CORE COLLABORATION COMMANDS&lt;/strong&gt;&lt;br&gt;
These are some of the fundamental Git commands that enable multiple developers to work on the same project simultaneously without interfering with each other's work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Branching&lt;/strong&gt;&lt;br&gt;
Branching allows developers to isolate their work on new features, bug fixes, or experiments in separate spaces, known as branches. This prevents introducing potentially unstable code directly into the main codebase (often referred to as &lt;code&gt;main&lt;/code&gt; or &lt;code&gt;master&lt;/code&gt;), ensuring the stability of the primary version. &lt;br&gt;
Some of the Git commands to manage these branches are:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git branch &amp;lt;branch-name&amp;gt; //To create a new branch.
git checkout &amp;lt;branch-name&amp;gt; //To switch to an existing one.
git checkout -b &amp;lt;new-branch-name&amp;gt; //To combine creation and switching.
git branch -d &amp;lt;branch-name&amp;gt; //To delete branch after merging.
git branch -D &amp;lt;branch-name&amp;gt; //To delete a branch forcefully when necessary.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Committing Changes&lt;/strong&gt;&lt;br&gt;
Committing changes in Git involves staging and committing. &lt;br&gt;
Staging allows developers to selectively add modifications they intend to include in the subsequent commit using the &lt;code&gt;git add&lt;/code&gt; command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git add &amp;lt;file&amp;gt; //for a specific file. 
git add . //for all changes.
git add -p &amp;lt;file&amp;gt; //for interactive staging.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;git status&lt;/code&gt; command allows developers to view which changes are staged and which are not. Once the desired changes are staged, the &lt;code&gt;git commit&lt;/code&gt; command saves these changes to the local repository, along with a commit message. &lt;br&gt;
NB: Commit messages should be written effectively to maintain a clear and understandable project history. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Remote Repositories&lt;/strong&gt;&lt;br&gt;
Remote repositories on GitHub enable team members to share their work and keep their local repositories synchronised. &lt;br&gt;
To connect a local repository to a remote one, the &lt;code&gt;git remote add origin &amp;lt;repository-url&amp;gt;&lt;/code&gt; command is used.  Where "&lt;strong&gt;&lt;em&gt;origin&lt;/em&gt;&lt;/strong&gt;" is a conventional name for the primary remote repository and &lt;strong&gt;&lt;em&gt;&lt;/em&gt;&lt;/strong&gt; is the URL of the remote repository on GitHub. &lt;br&gt;
Once a remote is added, the &lt;code&gt;git remote -v&lt;/code&gt; command can be used to list the configured remote repositories and their corresponding URLs, verifying the connection. This connection allows you to push local changes to the shared remote and pull changes made by other collaborators.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pushing Changes&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;git push&lt;/code&gt; command is used to push locally committed changes to the remote repository, making your work accessible to other team members. These are some associated commands: &lt;/p&gt;

&lt;p&gt;&lt;code&gt;git push &amp;lt;remote-name&amp;gt; &amp;lt;branch-name&amp;gt;&lt;/code&gt; Uploads your commits to a specific branch on the remote (e.g., git push origin feature-a). &lt;br&gt;
&lt;code&gt;git push -u origin &amp;lt;new-branch-name&amp;gt;&lt;/code&gt; Pushes a new local branch to the remote for the first time.&lt;/p&gt;

&lt;p&gt;There may be a potential issue when the remote branch has changes that your local branch doesn't; in such cases, a git pull is typically required first to integrate the remote changes locally before a successful git push.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pulling Changes&lt;/strong&gt; &lt;br&gt;
The &lt;code&gt;git pull&lt;/code&gt; command fetches changes from a remote repository and automatically merges them into your local branch. This keeps the local repo synchronised with the work being done. &lt;br&gt;
The command is generally &lt;code&gt;git pull &amp;lt;remote-name&amp;gt; &amp;lt;branch-name&amp;gt;&lt;/code&gt; (e.g., git pull origin main), but if tracking is set up, simply using git pull is enough. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;GITHUB FOR TEAM COLLABORATION&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3w6dy309dmqr0slj8jw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3w6dy309dmqr0slj8jw.png" alt="Github Interface showing various Github Tools" width="800" height="323"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Issues-Tracking Tasks and Bugs:&lt;/strong&gt; This is a system for tracking tasks, bug reports, and feature requests within a project's lifecycle. It requires a clear, descriptive title and a comprehensive description outlining the problem or task.&lt;/p&gt;

&lt;p&gt;It is managed by assigning responsibility for an issue to specific team members and tracking the progress of an issue through various stages (e.g., Open, In Progress, Needs Review, Closed). Labels such as &lt;strong&gt;bug&lt;/strong&gt;, &lt;strong&gt;feature&lt;/strong&gt;, &lt;strong&gt;enhancement&lt;/strong&gt;, and &lt;strong&gt;urgent&lt;/strong&gt; can be applied to categorise and filter issues.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pull Requests:&lt;/strong&gt; Code Review and Merging: This is important for proposing code changes and peer review before integrating them into the main codebase.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How it Works:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The developer creates a new branch dedicated to the changes.&lt;/li&gt;
&lt;li&gt;The developer implements the necessary code modifications on that branch.&lt;/li&gt;
&lt;li&gt;The developer submits a Pull Request (PR) targeting the desired integration branch (e.g., main, develop).
&lt;strong&gt;Merging:&lt;/strong&gt; Once the code review is satisfactory, the PR is merged, integrating the changes from the feature branch into the target branch.
&lt;strong&gt;NB:&lt;/strong&gt; There may be a case of merge conflicts, which occur when Git cannot automatically synchronise changes in the same lines of code between the Pull Request branch and the target branch.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Collaboration Tools on GitHub&lt;/strong&gt;&lt;br&gt;
GitHub provides tools that enable effective collaboration. Some of these are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Projects and Boards:&lt;/strong&gt; Visual and flexible tools for organising and managing project work.&lt;/li&gt;
&lt;li&gt;GitHub Discussions: Dedicated space for team-wide conversations and Q&amp;amp;A, separate from specific code changes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Collaborators and Permissions:&lt;/strong&gt; Controls who can view and contribute to the repository.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;BEST PRACTICES FOR COLLABORATIVE GIT &amp;amp; GITHUB&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Defining Effective Team Workflows: To enhance collaboration, teams should create clear workflows that include a branching strategy, a pull request process, coding standards, and a communication plan.&lt;/li&gt;
&lt;li&gt;Ensuring Quality Through Code Reviews: Timely and respectful code reviews are vital for quality. Feedback should focus on the code, involve discussions, and assign reviewers clearly for accountability.&lt;/li&gt;
&lt;li&gt;Managing Merge Conflicts: To effectively handle merge conflicts, teams should regularly sync their branches and communicate about potential issues. A systematic approach to resolving conflicts, followed by testing, ensures stability.&lt;/li&gt;
&lt;li&gt;Navigating Collaboration in Distributed Teams: African teams face challenges like internet variability and time zones. Emphasising asynchronous communication, detailed documentation, and flexible meeting times can improve collaboration.&lt;/li&gt;
&lt;li&gt;Enhancing Security Practices: Teams must protect sensitive information by avoiding direct commits of secrets, applying least privilege for access, enforcing two-factor authentication, and regularly auditing repository settings.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;CONCLUSION&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This guide covered essential Git and GitHub for team collaboration, emphasising branching, committing, remotes, issues, and pull requests. Effective workflows, code reviews, conflict management, and distributed team practices are key for success.&lt;br&gt;
Further Resources: Refer to the official Git (&lt;a href="https://git-scm.com/doc" rel="noopener noreferrer"&gt;https://git-scm.com/doc&lt;/a&gt;) and GitHub (&lt;a href="https://guides.github.com/" rel="noopener noreferrer"&gt;https://guides.github.com/&lt;/a&gt; and &lt;a href="https://docs.github.com/" rel="noopener noreferrer"&gt;https://docs.github.com/&lt;/a&gt;) documentation, and engage with relevant tech communities.&lt;/p&gt;

</description>
      <category>git</category>
      <category>github</category>
      <category>vcs</category>
      <category>webdev</category>
    </item>
    <item>
      <title>SETTING UP REACT ON YOUR LOCAL MACHINE</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Fri, 17 Jan 2025 19:53:57 +0000</pubDate>
      <link>https://dev.to/phanhie/setting-up-react-on-your-local-machine-8o5</link>
      <guid>https://dev.to/phanhie/setting-up-react-on-your-local-machine-8o5</guid>
      <description>&lt;p&gt;With the rise of libraries and frameworks, including React, making ready-to-use front-end applications has never been easier.&lt;br&gt;
React is a popular and widely used javascript library that is used to make website interfaces or UIs.&lt;br&gt;
React is an excellent choice for developing Single-Page Applications (SPAs) due to its ability to load an entire app on a single page, enhancing user experience. It simplifies the creation of interactive user interfaces, allowing developers to easily build elements such as buttons, forms, and data displays. &lt;br&gt;
React's performance is boosted by features like the Virtual DOM and various optimizations, ensuring that applications run efficiently. Also, React emphasizes reusability; components can be utilized across different parts of an application, ultimately saving both time and effort during the development process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Prerequisites&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Basic knowledge of web development technologies such as HTML, CSS, JavaScript&lt;/li&gt;
&lt;li&gt;A Code Editor and a Web Browser: a code editor like VS Code will enable you to write and manage your code with ease while a web browser allows you to view your app on the local host in real-time.&lt;/li&gt;
&lt;li&gt;Node.js and Npm(Node Package Manager): These are tools for managing external code libraries.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;## Installing Node.js and npm&lt;/strong&gt;&lt;br&gt;
If Node.js and npm are not installed on your device, you cannot use React, as it relies on many smaller pieces of code (packages) to function. npm helps you easily install, update, and manage these packages. Node.js provides the environment for these tools to work. Here’s a step-by-step guide on how to install Node.js and npm.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On your web browser, preferably, Chrome or Edge, go to the official Node.js website. &lt;a href="https://nodejs.org/" rel="noopener noreferrer"&gt;https://nodejs.org/&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;On the official Node.js website, there are 2 download options; LTS(Long Term Support) and the Current version with new features. It’s best to download Node.js with long term support. &lt;/li&gt;
&lt;li&gt;When the installer has been downloaded, you can successfully run it following the prior instructions from the installer. NB: check the “ADD TO PATH” option when it comes up to allow you to run Node.js on your terminal or command prompt.&lt;/li&gt;
&lt;li&gt;To verify you have installed both Node and npm into your device you can type the following command prompts in your terminal or common prompt. 
&lt;code&gt;node -v&lt;/code&gt; &amp;amp;  &lt;code&gt;npm -v&lt;/code&gt;: These commands tell you if you have node and npm installed and what version you have installed and look something like this.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8w3ow9jv5c70ak498drp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8w3ow9jv5c70ak498drp.png" alt="commands for verifying node and npm version" width="574" height="86"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Creating a New React Application Locally with Vite&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Vite is a build tool designed to make development easier and faster especially for JavaScript frameworks like React, Vue, and Svelte. etc. Unlike Create React App (CRA), Vite supports multiple frameworks and offers a much faster and more efficient way to bundle your code for the browser.&lt;br&gt;
Now that you have Node.js and npm installed, we'll use Vite to set up our work environment.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On the Vite official website (&lt;a href="https://vite.dev/guide/" rel="noopener noreferrer"&gt;https://vite.dev/guide/&lt;/a&gt;), scroll down a bit and you’ll see a list of commands for scaffolding your first Vite project.&lt;/li&gt;
&lt;li&gt;In your terminal, type in the command provided on the website as seen below.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6p4al1biprsrjbnqvfjj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6p4al1biprsrjbnqvfjj.png" alt="Command to run vite in terminal" width="800" height="141"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Running that command in your terminal will prompt you to answer a few questions, including:&lt;/li&gt;
&lt;li&gt;Project name
&lt;/li&gt;
&lt;li&gt;Choosing a framework, in this case, React.
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select a variant, which can be either JavaScript or TypeScript, depending on which you prefer to use.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Your project is now scaffolded, and a new set of commands is provided for you to execute in your terminal:&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;cd [Project Name]: This command changes the directory to the project folder you just created.&lt;/li&gt;
&lt;li&gt;npm install: This command installs the required npm packages.&lt;/li&gt;
&lt;li&gt;npm run dev: This command allows you to view your application in real-time on your local host using a link. If you are using Visual Studio Code (VSCode), it's recommended to run this command in the VSCode terminal for better accuracy.&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;After installing npm packages, you can open your folder directly in VSCode by using the command &lt;strong&gt;code .&lt;/strong&gt; in your terminal.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can now use the command &lt;code&gt;npm run dev&lt;/code&gt; to run your application in your web browser. This will allow you to see any changes you make to your codebase in real-time. &lt;br&gt;
If you're reading this, you're probably just starting with React. Along with this guide, you may want to check out the React course by Bob Ziroll and FreeCodeCamp on Scrimba.  &lt;a href="https://scrimba.com/learn-react-c0e" rel="noopener noreferrer"&gt;https://scrimba.com/learn-react-c0e&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>react</category>
      <category>vite</category>
      <category>node</category>
      <category>npm</category>
    </item>
    <item>
      <title>APIs - A BEGINNER’S GUIDE</title>
      <dc:creator>Phanhie</dc:creator>
      <pubDate>Fri, 10 Jan 2025 11:07:40 +0000</pubDate>
      <link>https://dev.to/phanhie/apis-a-beginners-guide-37hb</link>
      <guid>https://dev.to/phanhie/apis-a-beginners-guide-37hb</guid>
      <description>&lt;p&gt;You just started learning software development and so many terminologies are swimming in your lessons, which can be overwhelming. Then you hear about one, APIs, and you’re told it is a connection between the backend and front end of some websites. This was my initial understanding. While an API is a connection between software programs and applications, there’s way more to it than just that, and in this episode, we’ll talk briefly about what an API is.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Understanding the Basics&lt;/strong&gt;&lt;br&gt;
An API (Application Programming Interface) is a connection between computer programs. It helps two pieces of software communicate by providing functions with data. There are usually three components involved in this process:&lt;br&gt;
Endpoints: This is a digital location represented by a URL where an API receives requests for data. When a client seeks information, resources, or data, it requests this endpoint.&lt;br&gt;
Request: As the term suggests, this is a message sent to the API's database that asks for specific information or resources for the client.&lt;br&gt;
Response: This is the message returned after the request has been processed. It indicates whether the request was successful or unsuccessful, depending on the situation and the type of request made.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Types of APIs&lt;/strong&gt;&lt;br&gt;
There are several types of APIs,  including:&lt;br&gt;
Public APIs: Also known as Open APIs, these are APIs made available to the general public and all software developers. You can integrate these APIs into your application without concerns about infringement. A well-known example is the OpenWeather API, which can be used for weather-related development.&lt;br&gt;
Partner API: These APIs are not available to the public. They are created by a company to be shared with specific clients or partners. Examples include the Amazon Selling Partner API and the Airbnb Partner API. &lt;br&gt;
Internal APIs: Also referred to as private APIs, internal APIs are designed specifically for use within an organization. They enable different services to work together seamlessly and are not made public. &lt;br&gt;
RESTful API: Representational State Transfer (REST) APIs connect components in microservices architectures. They allow for secure communication between two software systems using HTTPS. &lt;br&gt;
Composite APIs: These APIs enable you to bundle several API calls into a single request, helping to organize data into the required format. They are built on a product’s existing architecture.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How APIs work?&lt;/strong&gt;&lt;br&gt;
APIs connect software in three simple but complex steps:&lt;br&gt;
There is a client application or software and the application sends a request to the API for a particular data.&lt;br&gt;
The API receives the request and processes it by consulting the API database.&lt;br&gt;
After the request has been processed, a response is sent back to the client application and is displayed on the website. This response can include data, an error message, or a status code. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Components of an API&lt;/strong&gt;&lt;br&gt;
API Endpoints&lt;br&gt;
An API endpoint is a URL where requests are sent by the client application. Every request from the client application has its endpoint, which is important for organizing the API and making it easier to use. &lt;br&gt;
Some examples of API endpoints are:&lt;br&gt;
Twitter - &lt;a href="https://api.twitter.com/2/tweets/%7Bid%7D" rel="noopener noreferrer"&gt;https://api.twitter.com/2/tweets/{id}&lt;/a&gt; &lt;br&gt;
Spotify - &lt;a href="https://api.spotify.com/v1/albums/%7Bid%7D" rel="noopener noreferrer"&gt;https://api.spotify.com/v1/albums/{id}&lt;/a&gt;&lt;br&gt;
YouTube - &lt;a href="https://www.googleapis.com/youtube/v3/videos" rel="noopener noreferrer"&gt;https://www.googleapis.com/youtube/v3/videos&lt;/a&gt; &lt;br&gt;
GitHub - &lt;a href="https://api.github.com/repos/torvalds/linux" rel="noopener noreferrer"&gt;https://api.github.com/repos/torvalds/linux&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;API Methods/HTTP Verbs&lt;br&gt;
These methods are used in the coding process of API integration to specify the actions to be performed on a resource. They inform the server of your intended operations with the requested data. They are:&lt;br&gt;
GET: Used to retrieve data from a resource. It should only be used for retrieving data and not for modifying it.&lt;br&gt;
POST: Used to create a new resource. The data for the new resource is sent in the request body.&lt;br&gt;
PUT: Used to update an existing resource. It typically replaces the entire resource with the data sent in the request body.&lt;br&gt;
DELETE: Used to delete a resource.&lt;/p&gt;

&lt;p&gt;Headers and Parameters&lt;br&gt;
These are additional components of an API request sent for different purposes and in different parts of the request. &lt;br&gt;
The header provides metadata about the request and response, sent in the HTTP headers. They enhance the request with additional information without being the request itself.&lt;br&gt;
Parameters on the other hand are used to specify data that influences the action taken by the API, parameters act like search filters to refine the data returned. They can appear in the URL in two forms: &lt;br&gt;
Query parameters: Added after a question mark (?) in the URL, these are used for filtering and sorting.&lt;br&gt;
Example: GET /products?category=electronics&amp;amp;sort=price&lt;br&gt;
Integrated into the URL path to identify specific resources.&lt;br&gt;
Example: GET /products/123 (where 123 is the ID of the product)&lt;br&gt;
Response Format&lt;br&gt;
This typically refers to the structure of the response sent to an API and depends on factors such as the data type sent, the programming language used, API design style etc.&lt;br&gt;
Some of these response formats are:&lt;br&gt;
JSON&lt;br&gt;
Plain Text&lt;br&gt;
XML (Extensible Markup Language)&lt;br&gt;
HTML (HyperText Markup Language)&lt;br&gt;
CSV (Comma Separated Values)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Importance of API&lt;/strong&gt;&lt;br&gt;
APIs connect different software and allow them to work seamlessly together creating room for innovation, and efficiency. This is useful because it makes things faster, easier, and better for everyone. For developers, it means they don't have to build everything from scratch – they can plug into existing tools and services. For businesses, it means they can update their systems without completely rebuilding them, reach more customers on different devices, and automate boring tasks. And for users, it means smoother experiences, like getting directions on a map or paying online easily. APIs make everything work together more smoothly and help businesses grow.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use Cases&lt;/strong&gt;&lt;br&gt;
Weather Updates: The weather forecast App on your phone uses APIs from weather data providers to fetch the latest weather information for your location.&lt;br&gt;
Social Media Integration: External websites or apps allow you to share stuff directly to your social media platforms by using the social media(Facebook, Twitter, Instagram) API. This can be done without having to manually copy and paste anything&lt;br&gt;
Online Payments: You're buying something online and you choose to pay with PayPal. The online store uses PayPal's API to securely connect to PayPal's systems, process your payment, and confirm the transaction. This ensures your financial information is handled safely.&lt;br&gt;
In conclusion, APIs connect the digital world. It allows different software systems to communicate and share information, enabling countless functionalities we rely on every day, from online shopping and social media to maps and streaming services. APIs are essential for modern technology and continue to drive the development of new and exciting applications by enhancing user experience and efficiency.&lt;/p&gt;

</description>
      <category>api</category>
      <category>softwaredevelopment</category>
    </item>
  </channel>
</rss>
