DEV Community: Oluwatobiloba Segun-Lean

Back to my vomit. To be better at code.

Oluwatobiloba Segun-Lean — Sat, 29 Jun 2024 22:09:43 +0000

Python was one of the first languages I learned, but I disregarded it after I realized the syntax was a bit weird for me compared to C-based languages which I am more comfortable with. But Python is a popular language, one that is not close to declining. So whether I like it or not I chose to return to it.
That led me to this, a challenge to me at the time, I had to use Python with the React JS application I was building, of course, the only reason I was limiting myself to using Python was to push myself. Many languages had richer libraries I could use to solve my problem like dotNET.
The application I was trying to build was a file converter, and the first feature I chose to implement was a pdf to word converter. Building my converter would require good knowledge of binaries, parsing, etc. I chose to use a Python module called pdf2docx.

from pdf2docx import Converter
import os
import sys

pdfFilePath = sys.argv[1]

if os.path.exists(pdfFilePath):

    pathLength = len(pdfFilePath)
    newPath = './converted/new.docx'

    cv = Converter(pdfFilePath)
    cv.convert(newPath)
    cv.close()

else:
    print("\n----NO SUCH DIRECTORY!----")

Difficulties

Here are some of the issues I faced down the line:

How do I use Python with the React JS app?
What’s the best way to send the file from the front to the back end?

Solving item 1

I explored various solutions like using Python on the back-end with frameworks like Flask or Django. But that would be overkill for one simple functionality.
Although not a novel solution and for many of you reading this you would have never considered this a problem, but for me a baby programmer it was a bit different. The first thing to consider was a server. I am not used to back-end programming with Python nor see any reason to use Python's HTTP server in this project. I decided to use node with express as it was a straighter forward implementation for me. So now the project had two servers, the Vite server for front-end rendering and Express for working at the back. I decided to use “child_process”;

const {spawn} = require("child_process");

a node module for creating sub-processes. In child_processes there is a function spawn, which is used to run scripts like how you would in a terminal.

const pythonProcess = spawn("py", ["./c.py", `${filePath}`]);

Solving item 2

The second issue was accessing the file on the backend. The solution was quite simple but I only embarrassingly figured it out after crying and threatening my computer. Originally, I had used the regular file picker input in HTML to allow the user to select a PDF file to convert, but I changed it to a drag-and-drop system. When the user drops their file in the “drop region” it needs to be passed as an argument to the python script which does the conversion. A fetch method is called to send the file path to the node server. Using this file path and the “child_process” a Python script is executed and the pdf file is converted to a docx file. The new file is automatically saved in the root folder called “converted”.

Finally

I am taking on more small projects like this to build my familiarity with various programming tools. The goal is to be able to confidently and efficiently solve simple to moderately difficult programming tasks. To be able to hop on the computer and automate renaming my files, or creating an app to monitor my sitting posture through my camera and to do it on a whim. That is why I decided to take on an internship program called the HNG internship (https://hng.tech/internship) which encourages language fluency and familiarity with various organizational skills and methods through individual projects and group projects. Although we are just at the first stage, stage 0, I can already see the detail and deliberate decisions in the tasks set. If you would like to Join I advise you to go with the paid option at https://hng.tech/premium to get a certificate upon completing the program and access the community for up to one year after the program ends.

Cover photo by mark glancy: https://www.pexels.com/photo/boston-terrier-wearing-unicorn-pet-costume-1564506/

Starting out: Vite or Next JS for React JS

Oluwatobiloba Segun-Lean — Fri, 28 Jun 2024 22:28:03 +0000

Anyone looking to become a full-fledged front-end developer will come across something called a framework. A front-end framework creates a structure to help developers efficiently create a user interface.

What does that have to do with this article? A common misconception is that React is a framework. React can actually be seen as a JavaScript library. The difference is not gaping, but it is good to note it to avoid confusion. The React library provides a collection tools that help developers create and render more responsive and interactive user interface.

In this article I will compare two popular React JS tools, Vite and Next JS. Vite is a react bundler and build tool, and Next JS is a JavaScript framework built on react. We are we comparing the two because selecting one of them to start with after getting into React JS is a common choice among beginner front-end developers.

About Vite

Vite was created about 4 years ago and since then it has gained a lot of track making it one of the common choices for developers. I started to use Vite after I tried my hands with create react app, and my experience so far has been very smooth.

About Next JS

Next JS is a web development framework based on React JS. It was initially released in 2016 is currently one of the more popular React JS frameworks wit over 1 million monthly developers according to Next JS (see: https://nextjs.org/blog/next-14-2).

Differences and Similarities

How do these two compare? While the most obvious difference between them is that Vite is a bundler and build tool, which means it helps tie your various resources (CSS, HTML, JavaScript etc.) into a single file and helps to scaffold your React JS project. But Next JS does more than that, it handles, building, bundling, routing, optimization etc. It can be used for server-side rendering and SEO, it is a framework. Clearly Next JS is more powerful and has some extra things built on top React JS. But does more power equal better?

Besides the technical differences, there are other factors like their learning curve, and community support. They both have a reasonably sized community, good documentation and many friendly non-toxic developers (based on my experience). Although Next JS has been here longer and has more features, so it tends to be the better known of the two. There is a difference in how easy it is to learn and practice though. Vite is regarded be many as a “proper” way to learn react. It doesn’t have any additional functionality in the same manner that Next JS does. Learning Next JS on the other hand is more demanding and feels like a whole different environment.

The choice

So, which one should beginners in React JS choose. In my opinion it is always going to be Vite, your can learn React JS starting with Vite, you do not have to necessarily learn React JS using CDN or create-react-app. But going through Next JS first would prove difficult and might not be the best foundation for novice front-end developers.

While delving deeper into your journey into front-end development as a beginner, you would be faced with so many options not even covered in this article and you would have to pick one if you want to stay relevant in this industry as many employers have already long adopted these modern tools and are heavily reliant on them. It has become imperative to at least have basic knowledge in multiple tools and frameworks and master at the very least one of them. With the rising popularity of the React JS library many companies are looking for talent in that area and withing the world of React there are still more frameworks and tools to choose from. If you decide to learn react, I would advise to use Vite over create-react-app and before you learn Next JS (if you decide to).

Conclusion

In conclusion, learning takes time and sometimes as beginners you might need more guidance than just what an article can provide, that is why other than just reading and practicing it is good to join a community or internship program like the HNG internship (https://hng.tech/internship) which offers both an internship and a community which you can have longer access to if you subscribe to HNG premium (https://hng.tech/premium). I myself am taking part of this internship. It is good to surround yourself with people with similar goals, in order to not be alone on your developer journey.

cover photo by Nick Gorniok : https://www.pexels.com/photo/scaffolding-on-building-wall-17925400/