Full-Stack Software Engineer, Designer, and salsa dancer.

How intersections of my interests are informing my career

Photograph of sky by Lydia Gregory
Photograph of sky by Lydia Gregory

If you’re familiar with my background, you know that software engineering was not always on the horizon for me. As a Cognitive Science major in undergrad, I took classes like Sociolinguistics, Philosophy of Happiness and Rational Choice, and Brain Systems Involved in Memory. I was interested in how people communicate, how we think and make decisions, and what goes on inside our brains.

I’ve also always had an interest in art. While painting was my medium of choice since I was young, college classes like Photography and New Media opened the world of digital media to me. I took a part-time graphic design job which dominoed into other design opportunities, including an architecture studio class, a web design apprenticeship, and plenty of freelance print and layout design work. …


Image of a fish hook. So original right?
Image of a fish hook. So original right?

Why use Hooks?

Class components aren’t going anywhere so the old way of working with is still completely legitimate. So why is everyone telling you to hop on the bandwagon and start using hooks instead?

  1. Reduce the need for more than one type of component (no more class components)
  2. Save time refactoring components to add state
  3. Make components more readable
  4. Break application logic into reusable peices (custom hooks)
  5. No more dealing with the intricacies of the JavaScript ‘this’ object

Implementing State with Hooks

Two general things on how to implement hooks before diving into specific hook types. First, only use hooks in functions, not in class components. Hooks let up ‘hook into stateful React in functional components that were previously only accessible in classes. …


black and white dappled light on leaves
black and white dappled light on leaves

What

An enum is a special data type that allows you to declare and query data with string variables but stores an integer in the database. You can think of an enum as being able to set a variable to a value (for Ruby on Rails, its an integer value). For example, if you want a status column in your database model, you could set the status to enum type and store your possible statuses started, in progress, and complete, as 0, 1, and 2.

Why

Not only does this let developers write more semantic code, but it’s also more space-efficient, less bug-prone, and easy to update down the road! …


Types of Positioning: Static, Relative, Absolute, Fixed, Sticky
Types of Positioning: Static, Relative, Absolute, Fixed, Sticky

Positioning lets you take specific elements our of the normal document flow and change their behavior. Below is guide on how each one works, with examples to boot.

Syntax

The CSS code looks pretty similar regardless of the type of positioning your design requires:

.positioned {
position: relative;
top: 0px;
right: 40px;
bottom: 10px;
left: 0px;
}

Types of Positioning

1. Static positioning (in-line by default)

Static positioning screenshot
Static positioning screenshot
View on Codepen

By default, HTML elements are positioned in line with the normal document layout flow. Static position can be explicitly specified like this:

position: static

although it’s usually unneccesary.

2. Relative Positioning

Relative positioning screenshot
Relative positioning screenshot
View on Codepen

Relative positions element relative to its in-line placement in the document. For instance in the example above, the Relative orange element is positioned 50px from the left and 10px from the top of its inline placement. Notice also that the space the element took up in it’s inline placement is still left over. The elements beneath it didn’t move in to fill the gap. That’s because it hasn’t actually been taken out of the document flow, so it’s spacing is still accounded for. …


While it’s easier (and better practice) to design and style your app for various screen sizes from the beginning, it IS possible to add responsive design to your projects after you’ve begun. Want to retroactively add responsiveness to an existing app? Here are 6 tips to get you started.

Small egg, big egg
Small egg, big egg
Learn how to scale your websites for various screen sizes

Background

Learning to code in a Bootcamp program has lots of advantages. …


Image for post
Image for post

The Polymorphic association is a Ruby on Rails feature that gives us the freedom to structure model relationships based on real life. …


Construction workers with protective hats
Construction workers with protective hats

What is a CSRF Attack?

CSRF stands for a Cross-Site Request Forgery attack. Through malicious links on websites, popups, emails, etc., users are tricked into unknowingly performing malicious actions of the attacker’s choosing.

Because it sneaks malicious actions into requests of users that are authenticated, I like the think of CSRF attacks as parasitic.

The damage that a CSRF attack can cause is related to (1) whether or not developers have added defenses against this type of attack and (2) the type of user account. For example, if the attack is achieved on a regular user’s account it can force the user to change their account information like their email or password, transfer funds, etc. …


Image for post
Image for post

Bootcamps teach you how to code in a short and intense program. As a 2020 Bootcamp grad, I know how to use the newest iteration of frameworks like React and Ruby on Rails, but I don’t know what the older versions of these frameworks were like, or how they’ve changed over time. As I learn more about companies’ stacks and production code in the real world, which are often built on trends from earlier versions of a framework, I’m learning how to fill gaps in my own knowledge of these frameworks.

For example, I recently discovered that the way I’ve been building Full-Stack Applications with Ruby on Rails and ReactJS is not the only way! Following the latest trends in full-stack development, the Flatiron School updated its curriculum recently to completely separate the frontend and the backend of an application. …


headphones pink on one side and green on the other
headphones pink on one side and green on the other

Last week, a freelance web design opportunity fell into my lap. …


bouncing arrow animation from example code
bouncing arrow animation from example code

If you’re familiar with my other writings or coding projects, you already know that styling is a source of joy. However, even while embracing CSS in all it’s complexity, I was still quite intimidated by animations until recently.

If you are like me, finally mustering the courage to tackle CSS animations, welcome!

Animations are executed with keyframes. …

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