DEV Community: Lauren Beatty

The Collab Lab TCL-30 Wrap-up: Fly to Me Edition!

Lauren Beatty — Sun, 05 Sep 2021 17:43:26 +0000

Developers

Mentors

Code of Conduct Responder

Stacie

The Dream Team

The Collab Lab is all about learning and understanding how our different strengths combine together to create unstoppable teams. Each member of the development team brought their strengths.

Alejandro: Tremendous skill and humility.
Jessica: Attention to detail and organization.
Katia: Exacting standards and amazing technical skill.
Megan: Professionalism, poise and a remarkable grown mindset.

They worked together to build a progressive web app (PWA) that shows you nearby Wikipedia entries. You can share your location and the app displays a Google Map that highlights points of interest near you as you explore!

View	Image
Map View
List View
Help View
Settings View

The Advanced Project

TCL-30 marked our 3rd time running the “advanced” project. What makes it advanced? Compared to the smart shopping list project that all Collabies participate in, this one more closely simulates a real-world project:

Issues on the project board vary in size. Some take as little as a day. Some span multiple weeks.
We use Jira, a common project management system used in software organizations. If you haven’t used Jira before, it has its own learning curve!
Developers on the project have multiple points through the course of the project where they get to choose their own adventure by setting priority of various features.
The stories on the project board are considered more of a starting point for discussion than a fixed set of features with well-defined acceptance criteria.

Additionally, the app itself is a bit more complicated than the shopping list app. It requires managing a lot of asynchronous state, which can get pretty mind-bendy!

Mentors Andrew and Lauren were impressed by the team’s dedication to code standards, openness to learning new technologies and approaches, and thoughtful, respectful code review.

With their technical and collaboration skills, each of these developers would make an immediate positive impact on your team.

So hire them! 🚀

React Deep Dive: Element vs. Component

Lauren Beatty — Sun, 07 Feb 2021 16:53:03 +0000

This year, I'm reading through the React docs and taking notes as I go.

React Element

A React Element is an object representation of a DOM node. It is a plain old object, and not an actual DOM element. In essence, it is a description of what you want to appear on the screen (oh, and it's declarative!).

{
  type: 'h2',
  props: {
    className: 'heading heading-medium',
    children: 'React Deep Dive'
  }
}

const header = (
  <h2 className="heading heading-medium">
    React Deep Dive
  </h2>
)

An Element has a type, props, and any children nested inside of it. The type can be either a DOM Element (like 'h2', in the above example), or a Component Element (like the Heading described below).

React Component

A React Component is composed of React Elements. It is either a class with a render function, or a stateless functional component. It takes props as an input and returns an element tree as its output. Component names start with a capital letter (Heading vs h2).

const Heading = (props) => {
  return (
   <h2 
    className={`heading heading-${props.size}`}
   >
    {props.children}
   </h2>
  )
}

I found this blog post (from 2015!) very helpful in understanding the differences.

React Deep Dive: It's Declarative

Lauren Beatty — Sun, 31 Jan 2021 15:37:17 +0000

This year, I'm starting to read through the React docs and take notes as I go so that I can be a better technical communicator.

Declarative

In looking at the React website, one of the first things you'll see is that React is "declarative". I felt like I had only a basic understanding of what that meant. I mean, you just declare it, right? 😂

I thought I might need a better understanding than that. I found a great explanation from Tyler McGinnis, that really informed my understanding, and also helped me understand why learning React felt like such a huge departure from jQuery-land.

So, what does it mean when we say that React is a declarative programming language?

Declarative means that we describe the end state of our program without dictating the steps to get there.

What does that look like?

// Describe a BasicButton component
const BasicButton = ({onClick, buttonText}) => {
  return (
    <button onClick={onClick}>{buttonText}</button>
  )
}

// later, when using BasicButton
<BasicButton
  onClick={() => setDrawerOpen(!open)}
  buttonText="Toggle"
/>

Here I'm describing to React what I want a BasicButton component to look like. It should render a button, it should have an onClick handler, and buttonText. When I use it, I can pass a function to onClick and some text to the button. I'm not telling React how to do it, I'm just describing what I'd like. I'm leaving the implementation details to React. Notice, too, that I can use this button anywhere, it doesn't rely on any specific context.

Imperative

How is that different from imperative? When I think of imperative, I think of a jQuery implementation like this:

$('button').on('click', () => {
  $('#drawer').toggleClass('open')
})

// Um, I have not used jQuery in quite some time. That was hard.

Here I'm engaging in direct DOM manipulation. When I click on the button, find the element that has an id of drawer, and then add or remove the class open from that element. I'm giving specific instructions for how I want this to happen. Do this thing, and then do that other thing. This code really depends on the existence of an element that has an id of drawer. It's not context-independent.

When learning React, I think that was the biggest challenge for me, is that switch from a more imperative style to a declarative style. I was used to directly manipulating the DOM and telling it the steps to follow, as opposed to just describing the UI state(s) I wanted.

(Here's another read that was super helpful)

React Deep Dive: Introduction

Lauren Beatty — Sat, 30 Jan 2021 21:02:40 +0000

Hi 👋

This year I've set out to better understand, and be able to articulate, React concepts.

Why 🤷‍♀️

I'm a Senior Frontend developer and a Team Lead. I've been working full-time with React for 2 years now. I often intuitively know what I need to do to accomplish something in React, but I find if I have to explain things from a technical perspective, my words are lacking.

Method 🛠️

Read the React docs and explore related material 30 minutes every weekday.📚
Write down my notes! For me, writing helps to solidify my learning. I'll usually read something through once to get the overall picture, then read it a second time and take notes as I go. 📝
At the end of the week read through my notes, and summarize anything important I learned in a brief blog post. 👩‍💻

That's it! My goal is to be a better technical communicator, but not burn out in the process. 😂

Posts ✍️

Team 10 Recap

Lauren Beatty — Wed, 30 Sep 2020 00:53:52 +0000

The Collab Lab's tenth team (affectionately known as TCL-10) wrapped up its eighth and final week. Every team brings unique skills and talents; TCL-10 amazed us with their advanced collaboration and high-level technical skills. I would say you should be quick to snap them up (if you can---some are already hired!), but I selfishly want to hog them for my own team.

This amazing group was comprised of: Kat DeVrieze, Lauren Yu, Quinn Lashinsky and Tiana Johnson. Mentors included Keeley Hammond, Lauren Beatty, and Matthew Hughes (a Collab Lab alum!).

While in The Collab Lab, 4 developers split into pairs every week to tackle 2 stories from the project's backlog. We emphasize collaboration throughout: managing asynchronous communication, pair programming, code review, version control, and project planning. A typical week flows from assignment of issues on a Sunday, to perhaps submitting a pull request(PR) by Thursday. We mentors knew we had a special group when both pairs had their first PRs up and ready for review by Tuesday afternoon!

TCL-10 highlights:

💻 Exceptional code review! We were blown away by how insightful, helpful and compassionate they were in their code reviews...from the beginning!
⏲️ They got ahead of schedule! Because they were so skilled, TCL-10 managed to easily tackle stories from the backlog weeks ahead of schedule.
🤔 Forward-thinkers! TCL-10 looked ahead at upcoming issues to understand where the app was headed, and set themselves up for technical success with flexible and thoughtful architecture.
🧠 A complete re-write of the dreaded "estimates" function! Participants build a smart shopping list which sorts a shopping list based upon how frequently an item is purchased. The app comes with a pre-defined function that estimates the next purchase date, but this group wrote their own from scratch...a Collab Lab first!
👩‍🎨 They created their own design system!!! Although none of the participants were designers, they created their own design system in Figma, and leveraged MaterialUI's rich API to generate custom styles for their components.
✨ Lifting each other up! I never have seen a group of people so quick to give credit to others for success. Each week we were blown away by their generosity of spirit.

The results speak for themselves: