CRUD is an acronym that’s used a lot in web and mobile development. Frontend engineers in particular might wonder what it means and why we use it. In this post, I’ll explain CRUD using PostgreSQL, and talk about why it’s important. Unfamiliar with SQL or Postgres? No problem! These examples are pretty simple. What is CRUD? CRUD is an acronym that stands for ‘create, read, update, and delete.’ In persistence, these are four operations we perform on a record. According to Wikipedia: “[t]he term was likely first popularized by James Martin in his 1983 book Managing the Data-base environment.” Thanks, James! ...

Have you ever wanted to create a timer in a React app? This could be in support of a UI timer or polling. In this post, I’ll explain how to create a timer effect in a React application using hooks and setInterval. Let’s get right to the code. Below, I’ll explain what every line is doing. import * as React from "react"; import { useState } from "react"; const App = () => { const [timer, setTimer] = useState(); const toggleTimer = () => { if (timer) { clearInterval(timer); setTimer(undefined); } else { const timerId = setInterval(() => console.log("tick"), 1000); setTimer(timerId); } }; return <button onClick={toggleTimer}>{timer ? "Stop" : "Start"}</button>; }; export default App; Here’s the summary: this code creates a button that reads “Start”. On click, that changes to “Stop”, creating a timer with setInterval ticking once per second. This tick behavior could represent anything, including: ...

When preparing feature development work, I write Gherkin-style tickets, which follow the “Given/When/Then” format. Many people call these stories, and I do, too. This technique is incredibly effective! But why? In this post, I’ll try to answer that question. I learned this technique watching the greats at Hashrocket. They’ve been doing it this way since 2008 because it works. I have two complementary arguments for this technique: images and raw text hide complexity, while stories reveal complexity. ...

Which HTML elements should we be giving a user to click? In this post, I’ll share some best practices for clickable elements. To summarize: Most clickable elements should be links or buttons. Use buttons and links for their respective jobs. Clickable elements need signifiers. Let’s get into it! Most Clickable Elements Should Be Links or Buttons Peruse a website’s markup;, and you’ll find many clickable elements that look like an HTML button, but aren’t: div, span, tr, etc. Sometimes there are no actual buttons in an application at all! ...

Great developers review their own code often and effectively. In this post, I’ll share a checklist of all my best tips for maximizing this important practice. 1. Wait As Long As You Can Wait as long as you can before reviewing your code. In On Writing, Stephen King recounts that when he finishes a first draft, he puts it away and doesn’t look at it for a long time. The closer we are to our work, the harder it is to see its flaws. ...

I’ve been lucky to have worked with some great engineers, and one thing that they tend to do exceptionally well is reporting about their work at meetings. Today I’d like to summarize what I think makes a great standup report. My goal is a report that’s informative, impromptu, and actionable. Informative I try to consistently bring the expected information to my standup report. Time is limited and valuable. On some teams, this is “yesterday, today, blockers.” I often omit yesterday’s work; it’s the past and likely less relevant. Same with blockers, or obstacles in my path; I try to resolve them before the meeting and avoid situations where I’m frequently blocked. ...

As a mentor at Code Platoon, I’ve been able to help many people transition into programming. In this post, I’d like to focus on a vital part of that process: crafting your transitioning-to-tech resume. Obstacle: Focusing on the Past The most common issue I see with transitioning resumes: too much focus on the past. A headline that says “Transitioning Chef and Aspiring Web Developer.” A summary that claims you are dabbling in programming while still running a kitchen. ...

Today I completed the ‘Resistor Color Trio’ TypeScript exercise on Exercism. Here’s my solution. This exercise asks us to write a TypeScript function that takes two color names (e.g. ‘brown’ and ‘black’) and a power-of-ten multiplier color (e.g. ‘black’), returning the electrical resistance they would produce in string format (‘10 ohms’ in this example). My Solution Here’s the provided unit test: import { decodedResistorValue } from './resistor-color-trio' describe('Resistor Colors', () => { it('Orange and orange and black', () => { expect(decodedResistorValue(['orange', 'orange', 'black'])).toEqual( '33 ohms' ) }) it('Blue and grey and brown', () => { expect(decodedResistorValue(['blue', 'grey', 'brown'])).toEqual('680 ohms') }) it('Red and black and red', () => { expect(decodedResistorValue(['red', 'black', 'red'])).toEqual('2 kiloohms') }) it('Green and brown and orange', () => { expect(decodedResistorValue(['green', 'brown', 'orange'])).toEqual( '51 kiloohms' ) }) it('Yellow and violet and yellow', () => { expect(decodedResistorValue(['yellow', 'violet', 'yellow'])).toEqual( '470 kiloohms' ) }) }) And my solution: ...

Today, I’d like to dive deeper into a part of my practice: using a persisted text file for jotting things down. In this post, I’ll explain the ‘why’ behind this technique, and provide an updated version of it. You can read the post I’m following up on here. Why Use a Scratchpad? Why use this technique? Here are a few reasons. I’m a note-taker. The military trains soldiers to always have “something to write on, and something to write with.” When I see somebody in a meeting not taking notes, I wonder if they’re paying attention and how they’re going to remember key details. ...

Some advice I offer people entering the programming profession is to buy the best hardware you can. You’re going to need it. Get the most powerful computer, the biggest monitor, the best keyboard, mouse, headset, microphone, and webcam your budget allows. If you have to choose one, invest in the computer and collect the peripherals later. In other desk jobs, there’s a frugality about hardware. “I’m just editing spreadsheets– I don’t need a powerful computer.” Programming is different. It’s resource-intensive work. In the web development, not only are you running multiple servers and processes, you might be running containerization software, multiple browsers, automated tests, and supporting tools like documentation and screenshot software. ...