Image for post
Image for post

This post is geared towards beginners with CSS, like myself, I will probably always consider myself a beginner, considering there is always more to learn. The goal of this short article is to introduce CSS pseudo-class selectors by giving 3 demonstrations of how a few different ones could be implemented.

There are many pseudo-class selectors, check the docs out here which lists them all. This post will cover a few which I find to be useful and easy to implement for beginners, and also help to give your app a slightly better UX/UI.

Here are the quick 3 topics I’ll be…


Image for post
Image for post
Photo by Glen Alejandro on Unsplash

This week I’ve decided to write about how to implement dark mode into a React app. In order to demonstrate this, I will be editing a super simple app I created for a previous post I wrote about how to make only specific elements printable while hiding others. I appropriately named the app “PrintaBull”.

What I’ll be doing:

  1. Creating the state that will hold the info about whether the user currently has “Light” or “Dark” mode selected.
  2. Adding a way to toggle which mode is currently active.
  3. Updating JSX elements to be ready for “Dark Mode” styling changes with ternary statements on each element’s id. …


Image for post
Image for post

I’ve been trying to come up with ways to make my apps and sites stand out in terms of creativity. I don’t have a lot of image editing software or anything, but I still want to make things that are unique and spark intrigue.

I was recently inspired while making an app for my Mom. …


Image for post
Image for post

As of lately, I’ve been in the process of building a progressive web app for my Mom’s Christmas present this year using React Hooks; It’s a digitalized version of her cookbooks and recipes all in one place.

With how many recipes she has, it got me thinking, if she wanted to find a single recipe, simply alphabetizing them might not be as intuitive as I would like.

This inspired me to create a search bar that would filter the recipe search results as the user was typing, instead of upon hitting a button.

Below, take a look at the end goal we are trying to achieve. Hopefully it is obvious this is just a template, and has fake recipes — my mom does not have a recipe called “Weird Stuff”!. …


Image for post
Image for post

The other day I deployed a React app I made for my wife, Funky Cafe. It’s a full stack app with the back end being Rails and the front end being React. Beforehand, I made sure it was responsive to smaller screens and would adjust accordingly.

I ran into a few problems when I deployed the front end to Firebase, nothing that wasn’t fixable though. …


Image for post
Image for post

I recently came across a coding problem which included parentheses in a string, and my goal was to replace the parentheses and everything inside them. My first thoughts were — find a way to use a regular expression!

I quickly realized that I didn’t know as much about parentheses in regex as I thought. So, I thought it would be nice to share what I found on my dive of the different usages of parentheses in regular expressions. Turns out, there are 3 different kinds!

To start, the 3 different types of parentheses are literal, capturing, and non-capturing.

If you have used regex before, you are most likely familiar at least with the literal parentheses, and probably even the capturing ones. However, if you are like me, you may not have heard about non-capturing parentheses in regular expressions. This short post will discuss each kind of parentheses, and will break down examples to further our understanding. …


Image for post
Image for post

Last week I made a double deck blackjack app and wrote about it, linked here. As someone who used to be a table games dealer in a casino for a few years, I enjoyed making the blackjack app so much that I am now creating a whole series of simple casino game web apps!

This week, I’ve decided roulette would be fun and challenging, yet reasonable to build and write about in a short period of time. …


Image for post
Image for post

Before I decided to make the career change to tech and become a software engineer, I worked at a casino for a few years as a table games dealer. I learned all the major games, including craps, roulette, blackjack, baccarat, and also learned the “carnival” style games offered too.

Naturally, I felt it would be a good exercise to work through how to develop a blackjack game. This post is going to break down some of the game logic required, and won’t go into any detail about styling. …


Image for post
Image for post

Lately, I have been spending a lot of time on a side project of mine called Funky Cafe. The gist of the app is simple. It allows my wife and I to select meals from a list of our favorite meals, then we select sides for those meals, and it spits out a printable page of ingredients on the final screen.

Take a look:

Image for post
Image for post
Not too bad!

I know, I know, always design for mobile first. I see and hear that a lot, but I didn’t listen and now I want to make my website look good on every screen size. I’ve been developing and styling Funky Cafe entirely based on a full screen rendering of the app, which is a pretty good user experience in full screen on a desktop or laptop. …


Image for post
Image for post

Ever since I started building web apps at Flatiron School, I have been interested in creating games, and puzzles that require logic. As a beginner dev, I needed to create super simple games to begin wrapping my head around designing slightly more complex games and the logic involved behind the scenes. One of the simplest, classic 2 player games of all time which can be played almost anywhere is Tic-Tac-Toe.

So that’s why I’m writing this article, in hopes that another beginner software developer will build Tic-Tac-Toe with React and use it as a stepping stone to understanding more complex game/code concepts in the future. …

About

Tyler J Funk

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

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