<p style="margin-left:0px;">Code highlighting on blog posts are important since it adds aesthetics to the blog post as well as it visualizes the code provided.<br>&nbsp;</p><h3 style="margin-left:0px;">Installing PrismJS</h3><p style="margin-left:0px;">There are many ways to add <a href="https://prismjs.com/">PrismJS</a> on <a href="https://nextjs.org/">Next.JS</a>. But in this blog, I opted to use the <a href="https://yarnpkg.com/">yarn</a> package manager. You may also use npm package manager or a CDN. To add PrismJS using yarn package manager, simply use the command: <code>yarn add prismjs</code><br>&nbsp;</p><h3 style="margin-left:0px;">Adding PrismJS CSS</h3><p style="margin-left:0px;">In order to style the code part, the PrismJS CSS must be loaded in the application. In your <code>_app</code><span style="color:rgb(248,248,242);"><code>.</code></span><code>js</code>, add the line&nbsp;</p><div class="raw-html-embed"><code class="language-javascript">import "prismjs/themes/prism-okaidia.css";</code></div><p style="margin-left:0px;text-align:justify;">Your <code>_app</code><span style="color:rgb(248,248,242);"><code>.</code></span><code>js</code> will look like this:</p><div class="raw-html-embed"><pre data-line="2" class="line-numbers"><code class="language-jsx">import "../styles/index.css";
import "prismjs/themes/prism-okaidia.css";

function MyApp({ Component, pageProps }) {
        return &lt;Component {...pageProps} /&gt;;
}

export default MyApp;</code></pre></div><p style="margin-left:0px;">&nbsp;</p><h3 style="margin-left:0px;">Adding PrismJS</h3><p style="margin-left:0px;">In your blog post page, import the necessary files for PrismJs. In my case, the file is the <span style="color:rgb(248,248,242);"><code>[</code></span><code>slug</code><span style="color:rgb(248,248,242);"><code>].</code></span><code>js</code> located on <code>pages</code><span style="color:rgb(248,248,242);"><code>/</code></span><code>posts</code><span style="color:rgb(248,248,242);"><code>/</code></span>. The PrismJS files needed are the following:</p><div class="raw-html-embed"><pre class="line-numbers"><code class="language-jsx">import Prism from "prismjs";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-python";</code></pre></div><p>&nbsp;</p><p style="margin-left:auto;">&nbsp;</p><h3 style="margin-left:0px;">Using PrismJS</h3><p style="margin-left:0px;">Now, PrismJS can now be used to highlight code. For example we want to highlight the code:</p><div class="raw-html-embed"><pre class="line-numbers"><code class="language-jsx">export default function Posts(props) {
    return (
        &lt;div className="container"&gt;
            &lt;p&gt;Code Highlighting using PrismJS on Next.JS&lt;/p&gt;
        &lt;/div&gt;
    )
}</code></pre></div><p style="margin-left:auto;">&nbsp;</p><p style="margin-left:0px;">First we need to encode the code using <a href="https://coderstoolbox.net/string/#!encoding=xml&amp;action=encode&amp;charset=utf_8">Coder's Toolbox</a>. This is important so that characters like &lt;, &gt;, and " will be read as texts, and not a codes or html tags. The code will look like this after encoding:</p><div class="raw-html-embed"><pre class="line-numbers"><code class="language-jsx">export default function Posts(props) {
    return (
        &amp;lt;div className=&amp;quot;container&amp;quot;&amp;gt;
            &amp;lt;p&amp;gt;Code Highlighting using PrismJS on Next.JS&amp;lt;/p&amp;gt;
        &amp;lt;/div&amp;gt;
    )
}</code></pre></div><p style="margin-left:0px;">&nbsp;</p><p style="margin-left:0px;">Then, we need to contain that code inside <span style="color:rgb(248,248,242);"><code>&lt;</code></span><span style="color:rgb(249,38,114);"><code>pre</code></span><span style="color:rgb(248,248,242);"><code>&gt;</code></span> and <span style="color:rgb(248,248,242);"><code>&lt;</code></span><span style="color:rgb(249,38,114);"><code>code</code></span><span style="color:rgb(248,248,242);"><code>&gt;</code></span> tags. The code will now be:</p><div class="raw-html-embed"><pre class="line-numbers"><code class="language-jsx">&lt;pre&gt;&lt;code class="language-jsx"&gt;export default function Posts(props) {
    return (
        &amp;amp;lt;div className=&amp;amp;quot;container&amp;amp;quot;&amp;amp;gt;
            &amp;amp;lt;p&amp;amp;gt;Code Highlighting using PrismJS on Next.JS&amp;amp;lt;/p&amp;amp;gt;
        &amp;amp;lt;/div&amp;amp;gt;
    )
}&lt;/code&gt;&lt;/pre&gt;</code></pre></div><p style="margin-left:auto;">&nbsp;</p><p style="margin-left:0px;">Lastly, we will highlight the code. use this command:</p><div class="raw-html-embed"><pre class="line-numbers"><code class="language-jsx">useEffect(() =&gt; {
    Prism.highlightAll()
  }, [])</code></pre></div><p style="margin-left:auto;">&nbsp;</p><h3 style="margin-left:0px;">Conclusion</h3><p style="margin-left:0px;">There are some other methods like using babel, which is I personally use. But for starters, the way discussed in this blog post is more appropriate.</p>

Screen_Shot_2012_07_31_at_21_57_03_400x400_b435b6f021.png

thumbnail_Screen_Shot_2012_07_31_at_21_57_03_400x400_b435b6f021.png

Code Highlighting on Next.JS using PrismJS

<h3 style="margin-left:0px;">Introduction</h3><p style="margin-left:0px;">I have used <a href="https://reactjs.org/">React </a>for my side project before. However, I am not satisfied with the performance as I see many websites perform way better and Search Engine Optimization (SEO) really sucks. I've used <a href="https://www.npmjs.com/package/react-helmet">react-helmet</a> to edit the head tag of the pages like description and title of each page. However, google search console does not crawl all my pages.<br><br>Upon reading articles on SEO for React, I stumbled in this interesting framework called <a href="https://nextjs.org/">Next.js</a>. I tried to learn it and fell in love with the framework. So, I decided to use it on my personal website instead of plain html, css, js.<br>&nbsp;</p><h3 style="margin-left:0px;">Tech Stack</h3><p style="margin-left:0px;">I created my Personal website as a way to learn frontend development. I used Next.js as the frontend framework and <a href="https://tailwindcss.com/">Tailwind CSS</a> for my CSS framework.<br><br>Next.js is capable of Server Side Rendering (SSR) and Static Site Generation (SSG). On the other hand, Tailwind CSS does not provide reusable components like react-bootstrap but I like it more as it can be highly customized to my liking.<br><br>Actually, I created a template for Next.js and Tailwind CSS which is uploaded on my Github - <a href="https://github.com/rgvillanueva28/NEXT.JS-TailwindCSS-template">NEXT.JS-TailwindCSS-template</a>.<br>&nbsp;</p><h3 style="margin-left:0px;">Development process</h3><p style="margin-left:0px;">At first, I planned to create multiple routes for the home, about, portfolio, and contact. I created that one actually but after sometime, I thought that it would be better if it will be a single page only and the navigation bar would smooth scroll to the section. I used <a href="https://www.npmjs.com/package/react-scroll">react-scroll</a> for that functionality.<br><br>Before creating the sections, I created the navigation bar first. I had a hard time creating this navigation bar since I am creating my site to be responsive so that it looks good on any device. Even though the navigation bar was done, I had several fixes for it over time. I then moved on to the sections and will fix the bugs on the navigation bar when I encounter them.<br><br>First done was the home section. I had a hard time using animation libraries since I am a still grasping the way on frontend development. At first, I used <a href="https://www.react-spring.io/">react-spring</a> but I am having a hard time utilizing it even though I read the documentation multiple times. I eventually sticked to <a href="https://www.framer.com/">framer-motion</a> as it has better documentation.<br><br>Moving on, the about me section was next done. The most basic of all. I think it's good for now but I'm planning to improve it some time. Nothing interesting in here though. 😆<br><br>Next done was the contact section. I used <a href="https://react-icons.github.io/react-icons/">react-icons</a> for the icons. It was harder than I thought though since I am not familiar with Tailwind CSS at all.<br><br>Last I made was the portfolio section. I picked some of my deserving projects to put in here. I made a card container for these portfolio items and utilized react-icons again.<br><br>I saw this interesting heading on <a href="https://githubuniverse.com/">https://githubuniverse.com/</a>. The gradient looks appealing to me so I utilized it on the section titles.<br><br>You may expect this but I used react-icons again on the scroll to the next section icon as well as the floating scroll to top button.<br><br>That's it for the frontend development. Now, what's my next problem? Yeah. Right. Deploying it.<br>&nbsp;</p><h3 style="margin-left:0px;">Deploy!!!</h3><p style="margin-left:0px;">Of course, I will deploy it on using Github Pages so I can utilize my <a href="https://rgvillanueva28.github.io/">rgvillanueva28.github.io</a> site. Thanks Github!<br><br>Now, I want that every time I push new changes on my source code, the <a href="https://github.com/rgvillanueva28/rgvillanueva28.github.io">rgvillanueva28.github.io repository</a> will update too. For that, I have a free education plan on <a href="https://travis-ci.com/">Travis CI</a>. I don't know testing yet so my source code has no tests. I used Travis CI for Continuous Deployment only.<br>&nbsp;</p><h3 style="margin-left:0px;">Additional Features</h3><p style="margin-left:0px;">This may be useless on my website but I am exploring about Progressive Web Applications or PWAs. Converting a Next.js project to a PWA is very easy. Just add <a href="https://www.npmjs.com/package/next-pwa">next-pwa</a> to your project. Refer to their documentation for further information but I'm telling you, as a beginner, it's easy.<br>&nbsp;</p><h3 style="margin-left:0px;">Conclusion</h3><p style="margin-left:0px;">That's it for this article. You may want to check my website on <a href="https://www.ranegillian.me/">https://www.ranegillian.me/</a>.</p>

large_portfolio_website_1e2ed574ea.jpg

medium_portfolio_website_1e2ed574ea.jpg

small_portfolio_website_1e2ed574ea.jpg

thumbnail_portfolio_website_1e2ed574ea.jpg

portfolio_website_1e2ed574ea.jpg

Creating my Personal Website

<p>I will share you my progress in coding including the projects I have made, languages I used, and even frameworks/libraries I explored and used.</p><p>&nbsp;</p><h3>Introduction</h3><p>When I was in Junior High School, I was introduced to programming using C++ in one of our subjects. That was my first time coding but only on console or terminal window and some basic looping. Later, we were again introduced to Graphical User Interface (GUI) and created applications using Visual BASIC. On the my last year, we were required to have a thesis and I created a Lap Timer using Arduino and Light Dependent Resistor. I ended up getting the Best Thesis award.</p><p>&nbsp;</p><p>During Senior High School, I stopped coding until we were required again to have a thesis on our last year. I then thought again of creating an application. Our group then created an Enrollment and Assessment System using Visual BASIC. Our group also got the Best Thesis award.</p><p>&nbsp;</p><h3>Year 2020</h3><p>During college, we used C++ and Python on lectures and laboratories. That's where my interest in coding started.</p><p>&nbsp;</p><p>Then one day, a batchmate invited me to attend, <a href="https://www.facebook.com/BlueHacksAdMU" target="_blank" rel="noopener noreferrer">BlueHacks 2020</a>, a hackathon organized by CompSAt. My batchmate advised me to learn Flutter as it will be the programming language that we will use. One week before the hackathon, I started to watch Flutter tutorials on YouTube. During the hackathon, I was very slow in creating the mobile application since I only studied Flutter for a single week and didn't have a clear grasp and understanding regarding the framework. We were not able to finish the mobile app. During presentation, I was really amazed on most participants since they were able to create a working application within a very short time. I was then inspired to continue learning to code. By the way, our project was called “<a href="https://github.com/rgvillanueva28/The-Irregulars" target="_blank" rel="noopener noreferrer">What's your ulam pare</a>”, a tinder-like mobile application but for foods.</p><figure class="image image-style-align-center image_resized" style="width:50%;"><img src="https://res.cloudinary.com/rgv/image/upload/v1663339581/what_s_your_ulam_pare_d6053b4afa.png" alt="A snippet of What's Your Ulam Pare"><figcaption>A snippet of What's Your Ulam Pare</figcaption></figure><p style="text-align:center;">&nbsp;</p><p>After the hackathon, I started a project, which is functional but not yet finished as of writing this article. The project was <a href="https://github.com/rgvillanueva28/JARVIS" target="_blank" rel="noopener noreferrer">Junior Assistant of Rane Villanueva - the Idiotic Senior (JARVIS)</a> and created using Python, HTML, CSS, and Javascript. When I created the project, I researched on what will I use for the Graphical User Interface (GUI) of the application when I want to use Python. Available choices before were Tkinter, PyQT, and <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer">pywebview</a>. I chose pywebview since HTML, CSS, and JS is very customizable in terms of GUI. The problem is that I haven't studied JS yet. Maybe that was the reason that I haven't continued the project for some time.</p><p>&nbsp;</p><p>Moving on, I continued to study Flutter. I purchased the course <a href="https://www.appbrewery.co/p/intro-to-flutter" target="_blank" rel="noopener noreferrer">Introduction to Flutter Development Using Dart</a> by Angela Yu.&nbsp;After finishing the course, I didn't have any progress on Flutter anymore.</p><p>&nbsp;</p><h3>Covid-19 Pandemic</h3><p>At the start of the pandemic, I was seeing many websites for tracking the statistics of CoVid-19 Cases. I then had an idea to make a chatbot on Facebook Messenger. It was created using Python and Flask and only offers a messenger chatbot on the early version. As of now, statistics are only available thru web on <a href="https://covid-chatbot-ph.herokuapp.com/" target="_blank" rel="noopener noreferrer">https://covid-chatbot-ph.herokuapp.com/</a> and the messenger chatbot is not functioning anymore since I haven't updated it yet.</p><p>&nbsp;</p><p>Moving further, one of our subjects has a requirement that we will make a python application that has a functionality of an Artificial Intelligence (AI).&nbsp;Our group immediately though of Covid-19 related projects. We ended up creating a Web Application Chatbot using Python and Django. We decided to make a Web Application since our initial plan was to make it available on the internet. When we finished our project, I tried to deploy it on Heroku. However, the tensorflow library has a very huge size and is not possible to be deployed on the free tier of heroku. If I had known of Github student benefits or AWS EC2 free tier during that time, I would have successfully deployed it. <a href="https://github.com/CoDev-20/Covid19Chatbot" target="_blank" rel="noopener noreferrer">Click here</a> to see our project on Github.</p><p>&nbsp;</p><p>I was then invited to participate in a Contact Tracing Project using bluetooth functionality of phones. I was on the frontend team and used react-native. Due to android permissions and restrictions, we weren't able to continue the project.</p><p>&nbsp;</p><h3>The Start of Web Development</h3><p>After that project, I started to focus more on Web Development.&nbsp;I started to learn HTML, CSS, and JS until I explored React framework. I created my <a href="https://rgvillanueva28.vercel.app/" target="_blank" rel="noopener noreferrer">first personal website</a> using React and was later converted NextJS. I have also created a <a href="https://mapuaportfolio.vercel.app/" target="_blank" rel="noopener noreferrer">portfolio website</a> where I upload files and answers on my previous subjects which is more popularly known in our school as Old Testaments (OT). The website's frontend was created using React while the backend was created using Python and Django since it was the only backend I know that time. Some other projects are my ESP8266 based RGB Remote which is available on <a href="https://github.com/rgvillanueva28/ESP8266-RGB-remote" target="_blank" rel="noopener noreferrer">web version</a> and <a href="https://github.com/rgvillanueva28/RaneGB-remote" target="_blank" rel="noopener noreferrer">flutter mobile app version</a>. I also created a <a href="http://gwa.ranevillanueva.com/" target="_blank" rel="noopener noreferrer">Web-based Gross Weighted Average (GWA) Calculator</a>.</p><p>&nbsp;</p><h3>Hacktoberfest</h3><p>Around the third week of October, I was browsing Facebook and came into Hacktoberfest 2020 thru <a href="https://www.facebook.com/PWAPilipinas" target="_blank" rel="noopener noreferrer">PWA Pilipinas Page</a>. To participate and receive swag, I needed to have four pull requests that are accepted and merged to any participating repositories before within October. PWA Pilipinas was participating during that time. The project was a <a href="https://todo.pwapilipinas.org/" target="_blank" rel="noopener noreferrer">todo web application</a> and several people participated in creating the website. I was able to create four pull requests to that website and all was accepted. Thus, I was able to complete the Hacktoberfest 2020 Challenge and received the swags. You can also <a href="https://dev.to/rgvillanueva28" target="_blank" rel="noopener noreferrer">check my badge here</a>.</p><p>&nbsp;</p><p>Around November, I was again invited to attend a HackFest 2020 organized by <a href="https://www.facebook.com/gdscloyola/" target="_blank" rel="noopener noreferrer">Google Developer Student Clubs Loyola</a>. This time, I used React to create the frontend of our Web Application and Firebase for authentication. We called our project Insight, an education platform that can offer Artificial Reality (AR) which is useful for Laboratory Subjects during the Pandemic. You may <a href="https://insight-ph.netlify.app/" target="_blank" rel="noopener noreferrer">visit our website here</a> and login using qwe@qwe.qwe for the email and qweqweqwe for the password. You can also <a href="https://github.com/Kahit-Ano" target="_blank" rel="noopener noreferrer">see our repositories here</a>.</p><p>&nbsp;</p><p>I used firebase for the Insight Project since that was the easiest authentication to setup and my other choice would be Django which takes longer to setup than firebase. To enhance my backend skills, I started casually learning MERN (MongoDB, Express, React, Node) Stack. I also continued using and learning Firebase Database and started to learn Typescript. Since I learn more by doing projects, I created a <a href="https://github.com/rgvillanueva28/Tudo" target="_blank" rel="noopener noreferrer">To do web application</a> using React and Firebase which as of now is not yet finished since I lessen my coding time during the month of December and had a hiatus on coding until February on the next year.</p><p>&nbsp;</p><h3>To be continued</h3><p>I will continue my coding journey on part 2 of this blog</p>

RANEGILLIAN

CATEGORY

Code Highlighting on Next.JS using PrismJS

Creating my Personal Website

My Coding Journey Part 1