I recently built an app for my family and friends called Nalarama, and I was reminded of how useful controlled forms are. In my app, I ask users to make multiple guesses on my puppy’s mix of breeds, which requires multiple inputs. With controlled form inputs, the value typed into the input is easily accessible, and I was able to effortlessly use those values in HTTP POST
requests, and also in JSX elements wherever I deemed necessary.
This post will be a glimpse into controlled inputs, and will demonstrate what that looks like when using React Hooks.
First and foremost, when I was learning about controlled inputs, it was hammered into my brain that a controlled form has — “inputs which get their value from state” — and then we had to repeat that sentence like 10 times in a row. …
This week I found myself diving back into Ruby on Rails. Mostly because I recently came up with an idea for an app I want to build which requires a back end. My dog recently had her DNA sent in to a doggy DNA testing site, and I want to build a simple form page my family and friends can visit, guess up to 5 different breeds, and submit their answers to the database so I can ultimately tally up each persons score and send out a results email.
I quickly started realizing I hadn’t worked with Ruby in awhile, and it was good to shake the cob webs off! I figured now was as good of time as any to write this simple guide of how to get a Ruby on Rails API up and running. For me, the purpose of doing this efficiently is so I can quickly move on to the front end fun. …
I wrote an article a couple weeks ago about some of the commands and shortcuts that can help improve workflow for those of us using VSCode as our editor. Since then, I have found some more tricks, and figured a ‘Part 2’ was in order! Be sure to check my first post as well as this one, you can find it here.
I said it in the other post, and it is relevant in this one, some of the tips I’ll be discussing may be available in other editors, but I personally am not 100% sure so I don’t want to put any misinformation out there. …
I was inspired to write about sorting an array by two different variables because of an issue I ran into while creating a project I was working on for Flatiron School before I graduated. I wanted to create a “Top Ten Leaderboard” which sorted the leaders by one variable first, then sorted them again by a different variable.
In this case I wanted to sort by the amount of time the user took to complete the game, and then sort by the amount of “misses” they made throughout their game session.
Let’s discuss what that might look like. For example, each game session might be an object that looked like…
This week I’ve been learning a few new shortcuts on VSCode, and I am wishing I knew about these sooner! I want to share some of the shortcuts and tricks I’ve found useful as a beginner, and demonstrate how to use them to improve your workflow!
These tips are intended to save time and keystrokes, and also make navigating the code editor easier. As they say — work smarter, not harder — and don’t ask me who “they” are!
To be honest, VSCode is the only editor I’ve ever used, but it’s possible this article could relate to other editors such as Atom, or Sublime Text, however, I am not sure! …
Hello everyone! This week I have been doing a little more working with Vue to expand my front end horizons, and have been interested in learning about conditional rendering and dynamic styling. This article will be focusing on dynamic styling, which simply put, means to make the styling for each element able to change based on the state of certain variables or conditions.
This is what makes Vue and other front end frameworks so amazing for developers! The ability to detect user input, and then instantly update the necessary elements to reflect that input are super valuable dev tools.
For this article, I will build out a very simple app with Vue that shows a way to change the styling of specific elements upon certain user input happening. Jumping right into it, I’ll be starting with three basic files, a JS file, HTML file, and CSS file all in one project folder. Here is what I’ll be starting…
I recently started taking a Udemy course for Vue.js and have learned enough to play around with it a bit. I figured I would share my initial thoughts, and what I’ve learned in just a couple days.
In order to demonstrate what I’ve learned, I’ll be building a very simple app from scratch, then I’ll incorporate Vue.js and talk about each step along the way. This post is meant to be an introduction to Vue.js for anyone out there interested in learning but just wants to check it out before they invest more time and energy. …
This week I decided to write about custom animations made in CSS, which is something I was instantly drawn to when I first started learning to code. I love that there are virtually endless possibilities, and that the developer has so much power when figuring out how to create their desired effect.
This post is targeting beginners who don’t know a whole lot about creating custom animations for their projects, but want to get started somewhere. …
Lately I have been doing some digging into text effects that can be created simply from just using CSS. I found a few that were very easy to implement, and I figured I would share those in this post. The text effects I will be talking about are just a few of the endless possibilities with CSS, but I found them to be especially creative, quick to use, and ultimately, great for beginners with CSS like myself.
I’ll be briefly talking about a few text effects which I first found here and then decided to create my own version. …
This post is geared towards beginners with CSS. 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 covering:
:hover
:active
:first-child
, :last-child
, :nth-child()
Pseudo-classes get used like so in our external CSS…
About