<?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>Forem: An Tran</title>
    <description>The latest articles on Forem by An Tran (@thienantran_2001).</description>
    <link>https://forem.com/thienantran_2001</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%2F3760366%2Ff7cccf07-f481-4962-9565-1f94dd933052.jpg</url>
      <title>Forem: An Tran</title>
      <link>https://forem.com/thienantran_2001</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/thienantran_2001"/>
    <language>en</language>
    <item>
      <title>Copilot Animate</title>
      <dc:creator>An Tran</dc:creator>
      <pubDate>Mon, 16 Feb 2026 07:58:22 +0000</pubDate>
      <link>https://forem.com/thienantran_2001/copilot-animate-56ig</link>
      <guid>https://forem.com/thienantran_2001/copilot-animate-56ig</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-01-21"&gt;GitHub Copilot CLI Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I'm a web developer. My problem is I could not remember all CSS animations and I need to search Google whenever I need an animation to inject to my component.&lt;br&gt;
As a result, My idea is using Copilot CLI to help me create an extension that integrates a set of css animation to a react component. This extension is called copilot-animate, and it does:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Show the list of CSS animation&lt;/li&gt;
&lt;li&gt;Preview a selected animation in: terminal, web-browser.&lt;/li&gt;
&lt;li&gt;Apply an animation in the list to an existed ReactJs Component in 2 ways: select options in CLI or just typing a command.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Link to project: &lt;a href="https://github.com/ThienAnTran-IT/antran-copilot-cli-challenge-2026/tree/main/copilot-animate" rel="noopener noreferrer"&gt;https://github.com/ThienAnTran-IT/antran-copilot-cli-challenge-2026/tree/main/copilot-animate&lt;/a&gt;
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Video of using Copilot CLI to planning the project based on my initiate idea:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;https://youtu.be/Y6PfYtJGpOM&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Using Copilot to support while implementing functions
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;https://youtu.be/oM1iSNiPgBU&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo of showing list of CSS Animations and apply them to React component using CLI
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;https://youtu.be/TRmJNQBgjWo&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo of applying an animation to a React component using command
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;https://youtu.be/H_gT8RGSu-0&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Experience with GitHub Copilot CLI
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Wrap the idea for Copilot CLI and let it planning all stages of implementation.&lt;/li&gt;
&lt;li&gt;Let Copilot CLI init the whole project: create project structure, create files and folders, setup all basic libraries/frameworks and scripts for running it the first time (Copilot CLI also keep validating all the things to make sure it's working)&lt;/li&gt;
&lt;li&gt;Get support from copilot from repeatative works that requires me to search Google multiple times like generating CSS files with different animation styles.&lt;/li&gt;
&lt;/ol&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%2Fdxj3bnkobbc769psfsmh.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%2Fdxj3bnkobbc769psfsmh.png" alt=" " width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An Tran &lt;a class="mentioned-user" href="https://dev.to/thienantran_2001"&gt;@thienantran_2001&lt;/a&gt; &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>cli</category>
      <category>githubcopilot</category>
    </item>
  </channel>
</rss>
