Sign in

Junior full stack developer.
Photo by Greg Rakozy on Unsplash

A popular utility-first CSS framework that makes it easy for web developers to build responsive websites. I have been using this recently for my React.js applications and my portfolio site. One of the neat things about using Tailwind is that you can stay within your markup files to apply your styling. The configuration file grants you the option of changing default animations, managing screen size modifications, and more. Recently they’ve added support for dark mode (yay!). Lastly, it won’t overload your website once released for production due to its small size.


Using npm, enter this in the terminal to install…

Photo by Miikka Luotio on Unsplash

Been a long time trying to get this to work properly. This blog post will be in-depth. I created an app that allows local business owners to register for an account and post announcements for their businesses. I admit it isn’t the best looking app right now but I would like to apply more styling to it in the future and add additional features, like maybe a search functionality.

Ruby on Rails Setup

The backend API was built using Ruby on Rails. When building out an API for a front-end application there are a couple of things to do. …

Photo by Jason D on Unsplash

After going through a mock technical interview through Skilled, I realized then that there was a lot missing in my fundamental knowledge of basic programming. I’m going to start writing out what I currently know now and look back to it in the future. To start off is the object lifecycle in Ruby. One of my main struggles starting out were methods with undefined variables. This can be solved and once defined it can be utilized for later use.

What is a class?

In object oriented programming, a class is essentially a template with data that contains the information and behaviour. In a class…

Photo by Axville on Unsplash

I have recently joined an indie game development team, three members consisting of myself and two graduates from FZD School of Design.

A quick backstory about myself, I have always loved video games! To be able to delve into my first game development project along with two talented individuals is absolutely exciting. They are both in charge of character design, background layout, and storyline. I am in charge of programming, sound effects, and music design.

As of now,

We’re currently utilizing the following:

  • Trello
  • Google Drive
  • Discord
  • Unity Engine
  • Blender3D
  • Adobe Creative Suite
  • Clipart Studio
  • Ableton Live 10

Trello is a great project…

Photo by Ferenc Almasi on Unsplash

The team recently posted about the plan for React 18 and what will be updated moving forward. I’ll be including resource links for continued reading from the team discussions and additional references as well!

  • Automatic batching
  • startTransition()
  • Improved server-side rendering (SSR)

Automatic Batching

React groups up an application’s multiple states together and renders it once. Let’s say your application has a couple useState() functions in one component. React batches up your states and renders it only once. However, these batch updates haven’t been consistent.

Until React 18, we only batched updates during the React event handlers. Updates inside of promises, setTimeout, native…

This post will be another perspective on recursion. No coding will be done here. I want to make sure that I can give a good post about it by understanding it fully myself.

I recently attended a workshop with the YearOne community. Every Thursdays we have Party Programming with Kristal. A day where everyone takes turns coming up with an algorithmic solution using JavaScript or another language of choice. This week we did an algorithm about recursion.

I mostly observed during the session. Recursion has had me circling in my mind a lot in the past mainly because of the…

Photo by Drew Beamer on Unsplash

I‘ll be talking about my latest volunteer experience working with the Digital Corps for Out In Tech. I had a great time working with my team and collabing with one of the members for the three sections we decided to tackle. All of it was designed using WordPress and meetings took place using Zoom.

There were a total of 80 volunteers consisting of Out In Tech members and several Automatticians to help us navigate the design and tools provided by WordPress. There were 12 members in my team ranging from developers, graphic designers, technical writers, and coding bootcamp alumni/students from…

Photo by Lagos Techie on Unsplash

Last part of the series! This time we’ll be making our page mobile-responsive, as well as, conduct tests with our React front-end using Enzyme & Jest.

Missed part three? Make sure to read that before moving forward.

Responsive Web Design

All devices were created differently. As of April 2021, the most used computer display is a 1920x1080. Last year, traffic share during the pandemic was spent on mobile devices which typically have a small display size and resolution. Just recently, smartphones with dual-screen capabilities also entered the market. We need to be mindful of the devices used and how that can potentially impact…

Photo by KOBU Agency on Unsplash

Part three is here! In this post, we’ll add some image flair to the site, animations, and smooth scrolling.

If you’re ever on a stump about where to get graphics and mock company logos for your website then I’m happy to share that you can find some online! I was able to source the images simply by searching for open-source illustrations or open-source logos. You’ll find designers who offer content for free to use for school, projects, and other non-profit work. …

Photo by James Harrison on Unsplash

Read up on part 1 if you haven’t! This is part 2 of TailwindCSS used in the React.js framework. Now that we have TailwindCSS installed, let’s get onto making components. You can name your create-react-app anything, I personally just named mine TailwindCSS.

Remove the boilerplate code from your App.js file, we’ll be using that later. Let’s make a Hero component!


A Hero section is the first thing that your user will see on your website to set the first impression. You may have noticed that other websites would display a logo with a slogan or an animated graphic. …

Shirlen Detablan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store