DEV Community: Gedalya Krycer

Design & Front-End Takeaways From "An Event Apart" Conference

Gedalya Krycer — Mon, 19 Dec 2022 03:25:50 +0000

A few days ago I attend the An Event Apart conference in San Fransisco and it was such a wonderful experience!

It featured 15 amazing speakers covering topics on CSS, user experience, SEO, and so much more.

This post contains some of the takeaways that really stood out to me. Each section has links to the speaker and resources they mentioned.

I'd definitely encourage hearing any of their talks if the opportunity is available!

Talks in this post:

📢 Declarative Design
📢 Eyes on the Prize: Lessons in User-Centered Design
📢 When New CSS Features Collide: Possibility and Complexity at the Intersections
📢 Cascading Layers of !mportance
📢 SEO teams—The UX Ally You’ve Been Missing All Your Life!
📢 Supercharge Your Development with GitHub Codespaces
📢 Animation in Today's Responsive Design
📢 How to Win at ARIA and Influence Web Accessibility
📢 Better Onboarding Through Guided Interaction
📢 CSS :has() Unlimited Power

Also, I'm so grateful to Planning Center, for enabling myself and fellow teammates to attend conferences like this one. The way they care for our growth is just one of the many reasons why I love working here!

Shameless plug… We are hiring! For anyone looking to join a great company, check out our career page. :)

📢 Declarative Design

Speaker:
Jeremy Keith
Author & Co-Founder of Clearleft

Main Takeaway

Consider if a system should be given step-by-step instructions or instead guidance on the output, allowing it to decide the steps for us.

Imperative vs Declarative Programming

Imperative programming is where you describe how the program operates, giving it step-by-step instructions.

Think of a tool like front-end JavaScript, where we can query a specific API for data and then specifically tell the browser how (or even if) to display that data in the DOM.
Similarly ARIA labels lets us tell screen readers specifically what to say and what elements to look at first.

Declarative programming on the other hand takes in a description of the output and then figures out the rest on its own.

For example, we tell HTML we want a <button> and then it figures how to communicate a lot of helpful information to screen readers, browsers, search engines, and even gives some base styling.
Similarly CSS allows us to using rem units to specify how big a font size should be. Then if needed, a user can change that font size to be larger.
We can take it a step further and specify padding-inline-start: 1rem; instead of padding-left: 1rem;. This does the same thing, but takes away the (imperative) assumption that the browser is showing a left-to-right language.

Different Mindsets

Imperative mindset gives more control with the code, which might be the right call if you are inventing something from scratch. Declarative mindset can feel like giving up control, however it also means your making less assumptions.

One of the ways Jeremy described declarative programming was to “Be the browser’s mentor, not its micro-manager”. It leads to a mindset of asking "should I be making assumptions for the browser and user?"

This mindset shift really stood out to me, because it takes things like ARIA labels that I usually think of as inherently a good thing and makes me consider the output more carefully.

As Jeremy mentioned, "The more ARIA you use, the more control you are trying to assert."

Principle of Least Power

This is where we choose the least powerful language suitable for a given purpose. The lower in the stack we go, the more simplicity in our solutions we might have. This simplicity might lead to less things breaking and a lower bar for learning.

If we don't legitimately need greater control that front-end JS and ARIA offers, then it might be a better choice to use HTML. In other words, don't use a <div role="button"> when <button> already exists.

Another thing to consider when moving lower in the stack, is that HTML is more "false tolerant" when compared to an imperative language like JavaScript. This means that it ignores what it doesn't understand (like a missing image) and keeps rendering the DOM. JavaScript however will throw up an error, that might break the page.

Taking A Layered Approach

Sometimes we can split the difference and use imperative and declarative programs and patterns together.

For example, use HTML & CSS as the foundation for the project and default for solving front-end problems. Then "sprinkle" JavaScript and ARIA on top, using them for the things that only they can do.
Using utilities like clamp() in CSS, lets us use imperative values, in a declarative way. Yes, we are setting a min and max value, but also allowing the value to shift between them as needed.

Other Takeaways

Be aware that the tools that we use are influencing us to go in a certain way. Figma, is probably making us go towards imperative design/programming as we can make pixel perfect mockups. It might be worth designing in Figma, but making final decisions once in the browser.
Look at approaches vs specific tools/solutions. Approaches lasts longer then the tools that enact them.
Culture drives if a Declarative approach is the right one. Is the team focused on the outcomes (declarative) or the actual way things are done (imperative)?

Resources

📢 Eyes on the Prize: Lessons in User-Centered Design

Speaker:
Anita Cheng
Former Cancer Researcher & Content Designer for San Francisco Digital Services

Main Takeaway

High stress environments highlights the importance of understanding the problem and getting input from people so that we are ready when it times to create a solution.

A Testimony Of Working Under Pressure

Anita was the only content designer embedded in San Francisco’s COVID Command Center. She recounted her incredible experience of translating highly complicated health notices and reports into readable content on the government website.

To say she was under tremendous pressure, would be a gross understatement. Policy and information was continually changing, requiring that she be always proactive, engaged and flexible through an incredibly stressful time. Yet she more then rose to the task, making sure any communication to the population was clear and timely.

Some Of The Lessons She Shared

Surprisingly, despite high stress and long hours she did not burn out. She attributed her energy and ability to focus to getting incredible support from her counterparts and higher-ups. She also truly believed that the work they were doing was for the greater good and important. This belief gave her continual energy and motivation on her hardest days.

Here are just a few of the other traits that helped her to be successful during this time.

Identifying her strengths and leaning into them. She created a personal mandate of what were the most important things in her role. As much as possible she delegated the rest away, which helped protect her time.
She used research to understand any risks and considered existing similar guidelines when tackling something she didn't know how to do. That helped minimize guessing.
She asked for help a lot. She might have been the only content designer, but she didn't go at it alone and collaborated frequently with different experts.
She reached out to different government departments, asking to be in more meetings. This gave her context (and lead time) of what was coming down the line.

Resources

hmntycntrd.com

📢 When New CSS Features Collide: Possibility and Complexity at the Intersections

Speaker:
Rachel Andrew
Technical Writer at Google & Member of the CSS Working Group

Main Takeaway

The future of CSS is bright, with many new features just landing or being added very soon that have been years in the making.

So Many New Features!

Rachel's talk was fascinating, covering the thought process and challenges the CSS Working Group consider when updating CSS.

She highlighted the history of developing Flexbox to solve the issues of float layouts. In someways, Flexbox is like the quote that is sometimes attributed to Henry Ford; "If I would have asked people what they wanted, they would have said faster horses."

It solves the specific problems of floated elements being hard to manipulate, since they are taken out of the document flow. However, it may not live up to the true potential of two dimensional layout, which came later on with CSS Grids.

She spoke about the power of CSS Grids and a new feature in the works called Subgrid. This lets child elements inherit their parent grid's size and track number.

She also covered new features like :has() (which I'll talk more about with a different speaker) and an CSS feature she is working on. Her proposal would allow developers to specify a custom focus order when laying out a complex grid of elements. This is a highly requested feature and is currently in review by the CSS Working Group.

Container Queries

The thing that grabbed my attention the most, was a new game changing feature called container queries. This allows the breakpoints to be based on a container size instead of the view-ports size.

This is a game changer because we can now design reusable components that can be used in a variety of layouts. Since it manages its own layout, such a component would be incredibly versatile.

If a "card" component was used in a single column it might show a wider layout and bigger font sizes. But if it had to appear in a row of cards at half the size, then we could stack the card content and reduce the font sizes.

This is already in Safari, Chrome, and just came to Firefox in version 109! 🎉 If the two top cards in the above example don't turn red, then try updating your browser.

Resources

📢 Cascading Layers of !mportance

Speaker:
Miriam Suzanne
Members of the CSS Working Group & SASS Core Team

Main Takeaway

CSS Cascading Layers lets us use more explicit selectors, by reducing specificity.

CSS Cascading Layers

Miriam lead us through a history of CSS and a fascinating demo of the new CSS Cascading Layer feature.

This feature allows for CSS selectors to be contained within @layer decorations. What is cool is that specificity of selectors is contained within that layer. We can then declare layers in the order of their priority.

Selectors outside of a layer by nature have the highest level of specificity, which gives us more flexibility.

@layer low, medium, high; // <–––– order here defines specificity 

@layer medium {
  button [type="submit"] {}
}

@layer high {
  button [type="submit"] {} // This wins
}

@layer low {
  button [type="submit"] {}
}

There are many use cases, but one would be to contain an external library in a layer. Then another layer with a higher priority can contain our overrides.

Resources

A Complete Guide to CSS Cascade Layers

📢 SEO teams—The UX Ally You’ve Been Missing All Your Life!

Speaker:
Wil Reynolds
Owner of Seer Interactive

Main Takeaway

Google search is really good at knowing the questions customers are asking and the intent behind their requests. Search results could be one of the tools we can use to understand our customers.

Speak The language Of The Customer

Google Search is really good at understand customer intent and intonation. (The feeling behind a question.)

Example 1:
At the start of Covid-19 people searched for the term “FDIC” because they were worried about the safety of their funds. However, banks were advertising about opening new checking accounts, which most people were not interested in.

Had they looked at what people were searching for, they could have instead assured existing and new customers that their money was secure during a tumultuous time.

Example 2:
Google also knows when customers change their language, based on the search terms customers look for. For a while “Ian” was bringing up results about an actor, until “Hurricane Ian” hit.

In about 12 minutes, Google understood that the intent of people’s searched changed and they directed results about the hurricane.

Example 3:
Many colleges were promoting their librarian programs with the technical name of the degree. As it turns out, potential students rarely searched by that degree’s name. Instead they typed in the phrase: “Become a librarian”.

By including that terminology within landing pages and advertisements, schools where able to answer the very question people were asking.

Using Google Search to Understand Intent Tips

Type a word or two in Google Search and let it complete the sentence. This will preview what actual questions people are asking. Sometimes we assume what people are looking for incorrectly.
Check the "People also ask" and "Related searches" sections of the Google SERP. This shows what people searched after they looked at the current results. These are questions that your product might be able to answer for them.
Check what Google Images is serving to people for search terms, then use similar images to communicate products and ideas. For example, "Modern Pool Lighting" will bring back images of beautiful pools lit up at night. However many eCommerce sites will use images of the lights themselves. They are missing the point by showing the literal product, while Google Images show how the product is being used.
When testing search results, check the same result on mobile and desktop. Google looks for very different things on each platform and will often display different results for the same term.

📢 Supercharge Your Development with GitHub Codespaces

Speaker:
Morten Rand-Hendriksen
Senior Staff Instructor for LinkedIn Learning

Main Takeaway

GitHub Codespaces removes the barrier to entry for writing code by creating a per-configured development environment on the cloud, allowing you to write code in the browser.

What Is It?

Codespaces is a new service by GitHub that creates a virtual computer that can run your program within GitHub. It will install any libraries and packages, running them in a server. It lets you push, pull, and sync commits directly with your repo.

In the demo, Morten spun up Next site and made an update in a matter of minutes, all from an under powered 2017 Chromebook that didn't have VS Code installed.

Some Benefits Discussed

Removes the blocker of needing a powerful machine to run process heavy tasks. Since everything is run off-site in the virtual computer.
Makes coding more accessible, since it takes care of starting up complex environments like Gatsby.
Makes teaching code easier. Since the teachers and students will be working off virtual computers, the settings can be unified.
Enhances both security and messing around with code. Since the Codespace is a virtual computer it can be thrown away if a malicious script was added in a PR or testing a feature breaks "all the things".

Resources

GitHub Codespaces

📢 Animation in Today's Responsive Design

Speaker:
Val Head
Author & Senior Staff Designer at Adobe

Main Takeaway

Recent improvements to CSS has given us greater control over animation properties, while still releasing control as needed to our users.

Individual Transform Properties

Declaring individual transform properties lets us get more flexibility when animating with keyframes.

We can create “composable” keyframe animation
It lets us add CSS variables for individual properties
It currently works for translate, rotate, and scale and always gets applied in that order.

.animate {
  translate: 0 20%;
  rotate: -15deg;
  scale: 2;
}

@keyframes slideAndSpin {
  0% { translate: 20px; rotate: 0deg; },
  30% { rotate: 2deg; },
  100% { translate: var(--move); },
}

.composableAnimate {
  animation: grow 2s, spin 3s;
}

@keyframes grow {
  0% { scale: 0.5; },
  100% { scale: 1.5;  },
}

@keyframes spin {
  0% { rotate: 10deg; },
  100% { rotate: 20deg;  },
}

`prefers-reduced-motion`

This is used to detect if the user has requested the system minimize the amount of animation or motion it uses. It is set either in the browser or at the OS level.

Identify potentially triggering motion effects. These relate to things that actually move or give the illusion of movement. Not necessarily an opacity change.

People asking for this preference still want the context of the motion, but just reduced.

@media (prefers-reduced-motion) {
  /* styles to apply if the user's settings are set to reduced motion */
}

Resources

MDN on prefers-reduced-motion

📢 How to Win at ARIA and Influence Web Accessibility

Speaker:
Tolu Adegbite
Product Designer at Meta

Main Takeaway

No ARIA is better then bad ARIA. Whenever possible, use native semantic HTML elements.

Tips & Rules of ARIA

Do not change the native elements, unless absolutely needed.
All interactive ARIA controls, must be usable with a keyboard.
Interactive controls must have proper semantics and cannot be hidden.
A role is a promise to the user that an element will behave a certain way. (role="button" means that this element is a button)
aria-label will override the original text. For example: <a aria-label="This text will read">This won't</a>
Toggle buttons like mute/unmute or pause/pause, need aria-pressed to read out their state at the right time
Radio buttons need aria-checked
Interactive elements usually use a tabindex=”0”

Resources

📢 Better Onboarding Through Guided Interaction

Speaker:
Krystal Higgins
Author & UX Designer at Google

Main Takeaway

Onboarding a new customer doesn't happen in one interaction at the beginning, but over a period of time.

The Fear of Good Onboarding

It can be easy to worry that new users will leave the product without understanding "all the things". Because of this fear, products resort to "Front-loaded instructions". Using cards, guides, overlays, tutorials, we try to make the user into an expert before they start using the product.

The problem with "Front-loaded instructions"…

Too much information upfront is hard to remember
The information is often presented out of context (ie. "Welcome to store, did you know our checkout has this awesome feature?")
By just having a tutorial upfront, the product might seem more complicated then it actually is.
Extensive and in-depth front-load information might be costly to maintain, as features are improved or added.

Treat Onboarding As A Journey Over Time

It is easy to look at "how many people completed the welcome guide" as a metric for if onboarding was successful. However, for the reasons mentioned above this metric might not equal customers feeling comfortable in our products.

Myth: we only have a single moment to help people learn the product.

Instead we should look at where customers/users begin in the product. (This might be different based on their roles or platform used.) Then only consider the onboarding done, when the "core usage of features" ends.

Core usage is…

Achievable for the user
Aligned to long term goals

For example, for a community focused product the expectation is for an organization to create groups of people, with the goal of connecting them via in-person or online events.

Core usage might be when a group leader created 2 groups (achievable) and an event in each (aligned to long term goals). Throughout this time they would still be in the "Onboarding stage".

Onboarding Opportunities Along The Journey

Better onboarding is about guided interactions. Krystal outlined three key states/stages that a new user/customer can be guided and informed.

Prompt: Lead the person to choose or understand an action at the time they are ready to take it.
Work: Helping the person complete the action they just started.
Followup: Guide to next step(s) after the action was taken

Where Does Onbording Take Place?

Onboarding should not be one size fits all and happens over time. As such, better onboarding starts as part of the core product's design.

Krystal advises to anchor information in context to the action being taken and not resort to overlays or add-ons if possible.

For example:

Some text near a "post" button that explains posting guidelines, instead of a big alert.
When writing the post, show some placeholder text that suggests great titles.
Instead of a big video upfront that covers all the features, use informative feature blank/empty states that provides or links educates about that specific feature.
Provide inline hints on how a feature works that reduce in visual impact and frequency over time.

Caution About Using Overlays

90% of participates ignore dialog overlay messages that interrupt tasks. They just get rid of them to get them out of the way.
Overlays are sometimes designed in isolation and can collide if forgotten about. (Login modal & "Welcome First Time User" modal)

Resources

Better Onboarding Book

📢 CSS `:has()` Unlimited Power

Speaker:
Eric Meyer
Co-Founder of An Event Apart

Main Takeaway

A powerful way to select parent elements (and more) with CSS.

Other Takeaways

a:has(.b) This is means a has a relationship with .b.
Don’t nest a :has() inside a :has(). Example: ❌ :has(:has())
Don’t nest a pseudo elements inside of :has()
Don’t nest a :has() inside of pseudo elements
Don’t add a :has() after a pseudo element
You can’t match :has(a[href]:visited) for user privacy reasons
:has() takes in a forgiving relative selector list, which means if it drops any item that isn’t valid. So if we do :has(h1, h-9a) the h1 will be looked at and h-9a will be ignored
Specificity follows whatever the most specific selector it contains

Resources

:has() MDN

Facing Imposter Syndrome: Am I Worthy?

Gedalya Krycer — Sat, 17 Sep 2022 22:26:21 +0000

Introduction

In the last article we explored feeling like "The Perfectionist" from the book "The Imposter Syndrome" and ways to overcome this at work.

Facing Imposter Syndrome: Am I Controlling?

Gedalya Krycer ・ Aug 22 ・ 7 min read

#mentalhealth #beginners #career #productivity

In this post let's look at another facet of Imposter Syndrome, a character called "The Superhero".

Sections

"The Superhero"
- Character Traits
- The Result
Personal Reflection
- Being A Workaholic
- Hustle Or Get Out
- Hard Work !== Reward
Finding Validation From Within
- Awareness
- Understand Your Need For Approval
- Work On Self-Worth
- Say Nice Things To Yourself Out Loud
- Accept Your Limits
- Fact Check Your Beliefs
- Stop Comparing Yourself
Summary

"The Superhero"

This person tends to go above and beyond at work to prove they are worthy of their title. Even if this person is producing strong results, they still feel like a fraud.

One way they cope with this feeling is to overwork, sometimes to the point of burnout. Working hard and getting great results is usually a good thing, but that isn't the case for this Imposter Syndrome type.

Their superhuman effort given is really to just cover up feeling insecure. So instead of feeling fulfilled, they continue to feel unworthy.

Character Traits

Addicted to External Validation: Often from work, getting validation from others about the quality, time, and effort spent on a project can feel life-changing. However, in this case, it is the only or at least the main source of validation.
Low Self-Esteem: Ironically superheroes don’t feel like this label. They feel subpar, not exceptional. Because healthy self-esteem doesn’t come from within, being alone can be uncomfortable.
Unhealthy Boundaries - Inner: These relate to our emotions and how we handle the effect of things happening in the external world around us. This might look like not taking a day off because we are worried about doing well on a big project. Or feeling defensive about accepting criticism of our work.
Unhealthy Boundaries - Outer: These are boundaries between yourself and other people. It often centers around knowing when to say “No” and not try to do it all. Often times saying “Yes” to something great, means we had to say many “no”’s to things that were’t serving us as much.
Unhealthy Relationships: One example of this is over-working all the time out of insecurity and a boss takes advantage of it or continually expecting it.
Burnout: All of the above can lead to feeling drained, resentful, and feeling even more unworthy since now we have no energy.

Personal Reflection

Like the "The Perfectionist" this type of Imposter Syndrome really hit close to home.

The book listed the following three questions that throughout my career I would have to answer a resounding "yes".

Question 1: Do you work later than others, just to be sure that your required 8 hours was really good enough?

Because I felt unworthy of holding a certain job title or the responsibility that came with a project, I felt like I could "make up the difference" by putting in extra hours. I began to believe that my work ethic and not my skillset was what was valuable.

When a request would come in at 4:50pm to design a website that needed to be presented the next day, I felt validated. Because I knew if I spent all night on it, I would get a "thank you for saving the day" from my boss.

The problem is when this became year in and year out, no matter what job I went to. My behavior resulted in my feeling burnout, sacrificing time with my family and friends, and still not feeling worthy.

Question 2: Do you struggle to have downtime because you feel like you should always be doing, and working more?

Since college I have heard that "a really graphic designer is always learning and always freelancing". Later as a developer I would hear "a real developer contributes to multiple open source projects and stays up until 3am coding for the joy of it".

When I did do all of those things, there were some benefit for sure. Again, great effort will usually bring at least some results.

However, as hard as I tried there was never enough time to learn EVERYTHING and take on every kind of client. I was doing it because of other people's expectations and to get their validation. Not because I enjoyed it.

Question 3: Do you feel undeserving of certain aspects of your life even though you worked hard to learn and earn them?

In 2020 I worked at a fast paced design agency full time, while going almost full time to a coding bootcamp at night. I worked really hard at both.

Eventually I left my job and spent 8 months learning code all day and fine tuning projects to become a very specific type of front-end developer / designer. That again took a lot of work.

It paid off and I landed my dream job, where I absolutely love what I do and who I work with.

Yet with all that being true, I have continually struggled with feeling like I belong. Specifically, feeling like I am not worthy and one day it will all be taken away. I would feel like a fraud, even when those around me are saying "good job". (It is the very reason I started learning more about Imposter Syndrome.)

Finding Validation From Within

The following are some helpful mindset changes from the book that resonated with me…

Awareness

By just recognizing the behavior and knowing when we seek approval, can be so impactful in starting to change it. Keeping a journal can be a good way to document and analyze this.

Understand Your Need For Approval

When you're about to ask for someone to validate your work, stop for a moment first. Ask yourself what do you think about your work. Do you think it is good and do you like it? Why or why not?

Work on self-worth

By literally giving ourselves self-validation, we can start to build up self-worth. Look at a task you just did objectively and really ask if it was a solid job and if you did well. 9/10 it is worthy of some self-praise.

Say Nice Things To Yourself Out Loud

I did my best.
It is ok to not feel great all the time.
I am worthy, just the way I am.
I'm proud of myself and all I have accomplished.
I work hard and deserve a break.
My feelings matter.
I trust myself.
I like [blank] about myself.

Accept Your Limits

Do not make crazy expectations for yourself and then allow other people to let you down. Your internal and external limits should be equal.

Fact Check Your Beliefs

Our brains are hardwired to center on thoughts that are easier, not necessarily more logical. When feeling unqualified this can lead to thinking negative things about ourselves that the rest of the world doesn't actually believe. This can also lead to our thoughts controlling our behaviors.

Stop Comparing Yourself

Our purpose and someone else's purpose are not the same. Comparison is unproductive

Summary

Like I said in the last post, I am still a work in progress. 😅 But since learning about "The Superhero" traits and imbalance it feeds in, I've been making some changes.

Some weekends or days I still work late, but they are now much fewer and far-between. When it does happen, I give myself grace and don't hold the same expectation to practice code that day.
Saying "no" to all freelance work these days has been life-bringing. It has open up time to do things I really love. Some things are related to code/design, but also starting new hobbies and having time with my wife and friends. Some weekends it means getting to sleep in and just watch movies, guilt free.
When I work on projects, I have been trying to take pride in my work vs basing its success completely on what other people say about it.
Sometimes my code gets a lot of feedback and change requests. That doesn't mean I should quit code and am unworthy. Instead it can be a moment to be grateful. "I am about to learn something new, which will make me more equipped the next time. This is kind of exciting!"
I have been trying to be a lot more open and vocal about my feelings to my bosses and co-workers. Feeling safe to share who I really am and capabilities, and then still be accepted for any shortcomings has bred new self-confidence.

I think a standout lesson learned from reading about this type of Imposter Syndrome for me is:

Perfection doesn't equal self worth.

I'll be good at somethings, maybe great at one of two and have a whole lot of things go wrong along the way. But that is ok. Who I am currently is enough. It's ok to have plans to grow and improve, but that also doesn't all have to happen to today. One day at a time, is more than enough. 🧡

Facing Imposter Syndrome: Am I Controlling?

Gedalya Krycer — Mon, 22 Aug 2022 01:56:00 +0000

Introduction

Recently I got really curious about the topic of imposter syndrome. Ever since college I have felt like an imposter.

I believed that everyone would recognize how little I knew and how incompetent I felt. Those fears did not leave, even after getting my dream job last year, as a front-end designer.

The crazy part, is that my work is full of encouraging people, who continually build me up. So the only person saying that I am not good enough, is me.

A few months ago I read a book called "The Imposter Syndrome", by Phil Roberts. My goal was to learn more about this topic and finally accept that I truly belong. This series of posts are a reflection and analysis from this book.

Sections

The Cast Of Imposter Syndrome
"The Perfectionist"
- Character Traits
- The Result
Personal Reflection
- Fear Of Mistakes
- Struggle To Delegate
- Fear Of Uncertainty
- Struggle to Celebrate
Addressing Perfectionism
- Recognizing Behavior
- Black/White Thinking or Splitting
- Catastrophic Thinking
- Probability Overestimation
- "Shoulds"
- Work On Realistic Thinking
Summary

The Cast Of Imposter Syndrome

Imposter Syndrome (I.S.) can mean a lot more then "I am not good enough". What we feel and what triggers us to feel that way can differ from person to person.

What I liked about "The Imposter Syndrome" book, is how it categorized I.S. into five unique personas. Each persona embodied specific traits and experiences that someone might go through, and then what they might do to make positive change.

Almost like characters in a movie, I found myself identifying with these people in different ways. I could picture times that I also struggled with similar thoughts and took comfort in the solutions suggested.

This post is focused on what I learned about the first character, "The Perfectionist".

"The Perfectionist"

Character Traits

Worries about meeting their own expectations.
Worries how others will judge them, if they don't hit their goals.
Primarily focuses on what went wrong after completing a task. Even if it went 99% successful, they may still feel like a failure.

The Result

Because they put so much focus on the end result and what people will think of them, they can be very controlling. The stakes of a single mistake can seem much higher, so this can make it hard for them to delegate responsibilities and trust others to do things right.

Often times The Perfectionist will self-impose a very high bar on what success should look like. This sets them up for failure from the very beginning, further "validating" the feeling that they are not good enough. Thus starts the cycle of needing to be in more control the next time.

So much of this need to control outcomes and achieve perfection, stems from a fear of uncertainty. The Perfectionist will work themselves (and maybe those around them) very hard in order to ever again feel uncertain.

Refusing to accept anything less than 100% perfection can often translate to real success. The problem is that The Perfectionist finds it hard to celebrate what they have achieved. They only focus on the outcome and will worry all along the path to get here. This can lead them feeling drained at the end, instead of fulfilled and proud.

Personal Reflection

Whew, I really identified with this character as I learned more about their struggles and how they thought.

Fear Of Mistakes

In the beginning of my career I worked for a design agency where I was responsible for managing several client accounts in addition to design work.

After talking to the client about their project's details, I would work on the print or web designs and then present the finished piece to the client.

If there was any mistakes in the work or they did not like the design, I'd have to answer for it right then and there. I constantly worried during those presentations that that I made a mistake and the client would get angry.

While being detailed oriented is a trait I am proud of, worrying to the point of panic isn't healthy. Mistakes can be learning experiences to grow and looking back I "grew" a lot, despite my best efforts to always be perfect. 😆

Struggle To Delegate

Later on as a Senior Web Designer and then Digital Design Director, I struggled with delegating work to other designers or account managers on my team.

When I did assign work, I'd often micro-manage our team, regularly checking how the work was being done and how client facing emails were being written.

There is a saying that a good leader will "trust, then verify" when managing a project. Unfortunately, I tended to focus more on the "verify" part than trusting things would go well.

It took me a long time and a lot of effort to build and in some cases, stabilize client relationships. I set a very high bar for success, out of fear that those client would stop working with us and it would be my fault in the end.

Taking a step back, no one ever died from a website presentation not going to plan. In reality I should have trusted my team's capabilities more and allowed them to learn from any mistakes as I had to.

Fear Of Uncertainty

Fear of uncertainty is actually what got me into learning how to code.

During project kick-off or update calls, I would get questions about servers, how long it might take to build a certain feature or what sort of API we could work with.

I never felt more like an imposter in those client meetings, not knowing what in the world to say. As a designer I could explain why the button should go there, but I couldn't communicate how the button worked.

I hated being viewed as "the expert", but not feeling capable. I was tired of saying "let me check with my development team on that".

After a code bootcamp and a lot of practice, I eventually could answer some of those questions. But I later realized that the real issue wasn't a lack of skill or knowledge. Rather that I didn't feel comfortable or safe to just say "I don't know".

In the last few years of learning front-end development, I have been trying to really embrace the state of not knowing.

Being a beginner or ignorant on subject doesn't have to be a judgment and condemnation on my intelligence. Instead it can simply be a starting off point to learn something new.

Struggle to Celebrate

Celebrating the wins are definitely a challenge. I’m chuckling now because even writing this paragraph is a bit hard for me.

Celebrating often feels uncomfortable, undeserved, and maybe even arrogant to say "Good job, I've earned that".

I expect a lot from myself, but that is just the effort put into the project. The fruits of that labour uselessly feels like a mistake, meant for someone else.

That is maybe why I really like working on a team vs freelancing. It feels good to be a part of something bigger than just my efforts.

Addressing Perfectionism

The following are some helpful mindset changes from from the book that resonated with me…

Recognizing Behavior

Going forward I can take time to recognize specific thought patterns around perfectionism and what triggered them.
Be aware that when I criticize myself as this can lead to a perfectionist mindset.

Black/White Thinking or Splitting

This is when I think things (like a project at work) are either a complete success or a complete failure.
This is unrealistic thinking because not everything can be all good or bad. It is ok to have things in the gray area.

Catastrophic Thinking

This is thinking of the worst-case scenario when tackling a project. Such as “If this doesn’t go perfectly I will never recover from shame and I will be fired.”
This thinking does nothing to help me and only serves to discourage me.
Instead thinking about things in a more positive light can actually help things. My mood will improve and with less stress I can perform at a higher level.

Probability Overestimation

This is where I discount any hard work that I have done and am waiting for people to judge me.
In reality, I can’t possibly know what others are thinking and I need to learn to give myself a chance to be imperfect and see what actually happens.

"Shoulds"

Having trouble allowing myself to relax. However, relaxing is ok and a healthy part of being alive.
It also includes comparing myself to what I think other people are doing. This is not a helpful thought process because I am basing my expectations on an assumption of someone else.

Work On Realistic Thinking

It's okay if my perspective is wrong and I can challenge my current thoughts for healthier ones.
- I should do better. ➡️ Nobody is perfect. I will do better next time.
- I can’t believe I made that mistake. I’m so stupid. ➡️ I messed up. But I learned something from it.

Summary

After learning about "The Perfectionist", I have to raise my hand and acknowledge taking on this mindset quite a bit. I have been and am still at times a very controlling person, because I want things to be perfect.

While being detailed oriented and hard working aren't inherently bad things, I think the struggle comes from the being imbalanced in those efforts.

Work hard and celebrate the wins
Learn new things and be ok with not knowing everything
Do your your best and give yourself grace when there are mistakes

I love this quote from "The Imposter Syndrome" book, chapter 2.

While I am still a work in progress, there is a lot I can love about myself and feel grateful for the many blessings along the way.

What do you love about yourself? I bet if you sat with it for a few minutes, you would find there is a lot to love. 🧡

Facing Imposter Syndrome: Do I Belong?

Gedalya Krycer — Sun, 07 Aug 2022 08:56:00 +0000

At the beginning of this year I set several goals.

A few include…

learn more React & CSS,
do more things after work that bring joy,
and find my place on my product team.

Tackling most of the goals were pretty straight forward. There are plenty of courses on React I could take and fulfilling activities in my free time that I could prioritize.

That last goal, find my place on my product team, that one however was a bit more allusive to define…

What does it even mean to "find my place" on my product team?

Feeling Out Of Place

My role on our team is pretty easy to identify. As a Front-End Designer, I get to work on the look and feel of our software throughout a feature cycle.

Towards the beginning of a project I work with our UX and product teams on how the feature looks and works. Once we have a direction, I often collaborate with my full-stack developer teammates in implementing the front-end code.

This combination of design and code is so much fun and in all honesty — a real dream role for me. Part of what makes it so great are the amazing people on my team. They are incredibly caring, fun to be around and so talented in what they do.

Yet, despite all of this being true, I ~~sometimes~~ often fear not belonging and being a fraud. This fear has followed me into almost every project, team meeting and can keep me up at night.

Realizing There Was Disconnect

Throughout my first year in this role I frequently reflected on these thoughts, further defining them as:

A belief of inadequacy: I lack the talent, experience and skills to design easy-to-use features and write high quality code.
A feeling of insecurity: What if I'm bringing my team down by not making timely contributions that will truly benefit our customers?

Our company's culture promotes genuinely safe spaces to speak vulnerably and be heard. So I shared these concerns with both my managers.

It turns out that my self-perceptions did not align with how they viewed me. Sure, there are plenty of areas that I can grow in, but in their eyes I was still bringing value and doing my job well.

So how do I get over/past/through feeling so inadequate, feeling out of place and ultimately view my work through the same lens that my peers & managers do?

With these questions in mind, I decided to change my original goal of "finding my place on my product team" to "accepting my place on my product team".

Digging Into Imposter Syndrome

Now that I had a clearer idea of what this goal was about, a way to make progress on this goal was to learn more about what fuels my fears. So I started reading a book called "The Imposter Syndrome", by Phil Roberts.

(There are several non-affiliate links to this book throughout the post. I am not being paid to promote it, simply want to share a resource that is helping me.)

This book proved to be incredibly helpful in demystifying the worries I (and as it turns out many others) where having. In fact, Phil talked about how over 70% of people feel this way at one point in their life or another.

Experience vs Syndrome

Funnily enough, he shares that because so many people have these thoughts — Imposter Syndrome is an "Experience", not a "Syndrome".

A syndrome is defined as “group of signs and symptoms that occur together to characterize a particular abnormality or condition”.

Imposter Syndrome does not characterize an abnormality, rather it is considered a shared experience.

I felt a lot of relief reading that, because an "Experience" certainly sounds less daunting to work through than a "Syndrome".

Imposter Syndrome Characteristics

The book also lists many different feelings and beliefs that can be associated with Imposter Syndrome. Below are the ones I really resonated with.

Self-doubt
Feeling like a fraud
Attributing success to external factors or luck
Fear of being found out as a fraud
Berating my performance
Fear of living up to expectations
Overachieving to prove worthiness
Sabotaging success out of fear
Setting challenging goals then feeling disappointed when I fall short
Negative inner voice
Dwelling on past mistakes/failures
Constantly comparing myself to others
Feeling inferior if I am not recognized as the best or special in an area

Are there any that speak to you?

Clance Imposter Phenomenon Scale (CIPS)

Mid-way through the first chapter was a collection of 20 statements called CIPS. These can help determine how intense someone’s experience is with Impostor Syndrome.

I scored 79, which is just two points away from “Intense” (81+), and signifies a “frequent” (61-80) experience. 😬 This really confirmed for me that this is an area I can focus on healing and have a lot of room to grow.

(Here is a free online version of the test you can take for yourself.)

Some Quotes from Chapter One That Resonated

“Working ourselves so hard may indicate we need this external validation in order to feel worthy.”
“You may be trying to prove that you are in fact not a fraud when in reality, you are the only one thinking this way. This is exhausting…”
“We need to be the one who is confident in order to internalize our success and not feel like a fake.”

Why Write This Post?

After reading "The Imposter Syndrome" I've found it easier lately to identify and challenge the insecure thoughts as they come up. More and more I feel like I do belong in my role and have something to contribute.

A lot of this post came from notes I took while reading this book. Writing is such a helpful tool in understanding and internalizing new information. So I might write some more posts in the near future pulling out parts that I really identified with and where my fears come from.

I also wanted to share with any budding designers & developers reading that feeling inadequate and like an imposter is a shared experience. If you feel this way too, it's going to be ok! As I'm learning for myself, those feelings aren't always a true reflection of what we have to offer.

I encourage you to get curious around the subject and where your fears stem from. Try to talk about them with your teammates if you feel comfortable. You might be surprised that they can really relate and may have similar feelings.

Project Showcase: Building A React Site For A Non-Profit School In Africa

Gedalya Krycer — Sun, 20 Jun 2021 17:03:24 +0000

TLDR:

The following was my process in creating a marketing site for a new type of hybrid learning school in Sierra Leone.

🔗 View Deployed Version

🔗 View GitHub Repository

The Project Brief
Logo Concepts
Web Design
Tech Used
Custom Navigation
Mailchimp Intergration
Slideshow Hero Banner
Dynamic "Back To Top" Buttons
Crisis Accordion & Vertical Tabs
YouTube Playlist API Intergration
Netlify Contact Form

The Project Brief

Gen Hybrid Systems is a new nonprofit with one mission... To build a hybrid learning school in Sierra Leone, Africa.

Hybrid learning is where a student can take classes either in a physical school building or online. For some in Sierra Leone, this means they won't have to walk 5-8 miles to get to class. It will be a game-changer for them.

My job was to first help flesh out the branding with some logo concepts, then design and build their initial website.

The goal of the website was to first introduce the education crisis in Sierra Leone and how Gen Hybrid Systems will help. Secondly, provide them with a way to share progress and build a follower base.

Logo Concepts

The project kicked off with creating several logo concepts to help represent the new organization. I don't really offer logo design as a services these day, but it was a helpful exercise to get started.

Tools used:

In the end, Gen Hybrid went in a different direction and created this final logo mark with one of their other partners.

Even though my suggested concepts were not used, this was not time wasted by any means. I ended up using my research for the logo comps, to help inform the next stage — designing the website's UI and structure.

Web Design

My approach to the design was to have it first and foremost serve the goals of Gen Hybrid.

Stand out from other educational organizations visually
Educate site visitors about the crisis in Sierra Leone
Enable visitors to follow the progress of this mission

To stand out visually I used deep brown colors with yellow and blue as accents. (Interactive elements specifically use the yellow highlight color.) I chose the brown and serif font to tie into a "book" theme, but not be overly scholastic.

Credit: Render mockup downloaded from ebhy | www.freepik.com

I used Figma primarily to design and prototype the site.

The following sections will highlight ways how the site educates visitors about the crisis and ways to follow Gen Hybrid Systems.

Tech Used

Custom Navigation

The site as a whole does not use a CSS framework but relies on custom SCSS styles. (With some help from Stack Overflow. 😇)

This posed an interesting challenge for the navbar, as it behaves very differently on mobile than desktop. It was a wonderful learning experience in the end though!

On mobile, I ended up using a custom React hook called use-scroll-position to help calculate how much of the page has been scrolled. Once down 100px – 200px or so, the menu becomes sticky and receives a background color.

For the toggle menu button, there is a fun little CSS animation. It is also a11y friendly, with some hidden screen reader text.

View SCSS Code →

Mailchimp Intergration

To help build a following there is a subscription form in the navigation that stores contact information in Mailchimp.

For a complete guide on integrating Mailchimp with React, check out my previous article.

Create an email list with React + Mailchimp

Gedalya Krycer ・ May 3 '21

#react #mailchimp #webdev #tutorial

Slideshow Hero Banner

It was really important to visually showcase the ability to study in school and at home. After all, this is one of the main benefits of hybrid learning.

The main hero banner archives this with two responsive images, that fade back-and-forth between each other. It took a lot of googling but ended up achieving with the help of absolute positioning and CSS animations.

Dynamic "Back To Top" Buttons

Because this was a single-page site that was rather long, I felt it important to add a "back to top" button. However, it isn't helpful to show this button when the viewer is already at the top of the page.

Once again the custom React hook use-scroll-position came to the rescue.

On desktop screens, I used it to calculate when a button should appear/disappear within the social media pinned sidebar.

On mobile screens the same button shows up past a certain scroll distance, but this time on the bottom right of the screen.

View JSX Code →

Crisis Accordion & Vertical Tabs

One of the more complex challenges to design and build was the Crisis section. I wanted to illustrate in an interactive way, what issues Gen Hybrid Systems is looking to solve.

Using a bunch of tutorials I created a vertical tab menu that also acts as accordion.

When a tab is clicked, an image animates in and the accordion opens to reveal more text and a button. On mobile the images go away, with the focus being on the vertical tab accordions.

The whole section also has slight a parallax scroll.

View JSX Code →

YouTube Playlist API Intergration

I used YouTube's API, (specifically the PlaylistItems endpoint) to bring in the latest Gen Hybrid System videos. This gave them an easy way to keep the site's visitors up to date, without needing to touch any code.

Netlify Contact Form

Leveraging the custom input fields (mentioned above) and Netlify's super simple (& free) mail server I built in a contact form.

Netlify does a lot of the heavy lifting with spam protection, but I built in some additional validation to ensure the correct info is captured.

The "Send" button will not "enable" until all the form fields are filled out and the email field contains an @ in it.

I hope you enjoyed viewing this project and maybe even got a few ideas for your next one! Please share in the comments what you come up with. Always love seeing how people approach designing and building freelance sites.

Thumbnail designed with Figma

OhSnap! Manage Global Styles In React Native

Gedalya Krycer — Mon, 24 May 2021 08:20:30 +0000

The "OhSnap!" series explores bite-sized tips that you can apply today.

Introduction

One of the big adjustments I had to make when using React Native, is not relying on CSS.

Sure, there are still "CSS-like" properties that use the JS-based StyleSheet method, but they are not the same.

For example, since everything is locally scoped, we can’t easily set global styles.

Well, not quite...

Here are two ways to handle global styles that are actually pretty simple, yet powerful.

Method A: Custom Styled Component

Using a standard React pattern, we will create a custom component for the element we want to style globally.

Within this component, we can set default styles and also use props to override those styles.

Then we can import and use this component anywhere in our project. If the styles need to change, only that component needs to be updated.

For example:

<HeaderOne /> could contain a bold <Text> element with a large font size.
<BodyText /> could contain a smaller, dark grey <Text> element.
<PrimaryButton /> could contain a <TouchableOpacity> element with a green background and uppercase text.

Aright! Enough talk. Let's see how it actually looks and set up a styled button we can use globally.

Step 1: Create base `<PrimaryButton />` component

Our component should accept props and import some standard React Native default components to create the base structure & functionality.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';


const PrimaryButton = props => {
  return (
    <TouchableOpacity 
      onPress={() => props.pressHandler}
    >
     <Text>{props.title}</Text>
    </TouchableOpacity>
  );
};

export default PrimaryButton;

Step 2: Add base styles

Using the StyleSheet method from React Native, set up some base styles for this button.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';


const PrimaryButton = props => {
  return (
    <TouchableOpacity 
      style={styles.btnContainer} 
      onPress={() => props.pressHandler}
    >
     <Text style={styles.text}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
    btnContainer: {
        paddingVertical: 3,
        paddingHorizontal: 10
        backgroundColor: 'green',
        justifyContent: 'center',
    },
    text: {
      color: 'white',
      fontSize: 20,
    }, 
});

export default PrimaryButton;

Step 3: Spread local styles & prop styles

Use the spread operator to add all current styles and then any custom styles being passed in via props. This will allow additional styles to be added/overwritten.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';


const PrimaryButton = props => {
  return (
    <TouchableOpacity 
      style={{...styles.btnContainer, ...props.containerStyle}}
      onPress={() => props.pressHandler}
    >
     <Text 
       style={{...styles.text, ...props.textStyle}}
     >
      {props.title}
     </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
    btnContainer: {
        paddingVertical: 3,
        paddingHorizontal: 10
        backgroundColor: 'green',
        justifyContent: 'center',
    },
    text: {
      color: 'white',
      fontSize: 20,
    }, 
});

export default PrimaryButton;

Step 4: Use `<PrimaryButton />` anywhere in the project

Note how we are passing in a custom margin, via props. This will get applied to the button, in addition to the default local style we set up already.

import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import PrimaryButton from './components/PrimaryButton'


const ContactScreen = props => {
  return (
   <View>
    <Text>Contact Us</Text>
    •••
    <PrimaryButton 
      title="Submit"
      pressHandler={someCoolFunction}
      containerStyle={styles.btn}
      textStyle={styles.title}
    />
   </View>
  );
};

const styles = StyleSheet.create({
    btn: {
        marginTop: 10,
    },
    btnTitle: {
      color: 'grey',
    }, 
});

export default ContactScreen;

Method B: Export Global Object

This next method can either be used instead of custom components or in conjunction with it.

The idea to store values for CSS properties inside of objects or variables that are exported from global files.

Let's take the example of how to work with colors. Imagine having to change the "Primary" brand color from blue to green. With the below method you just need to update that color in one file.

Step 1: Create a global styles folder

In the root of the src directory create a new folder called styles and add a new file called colors.js.

/src
|—— /styles
    |—— colors.js

Step 2: Add property values.

Create and export an object within the colors file that holds the values

export default {
  primary: '#FFBB0B',
  primaryLight: '#FFDF8E',
  primaryDark: '#CB9303',
  secondary: '#63321C',
  secondaryLight: '#735243',
  secondaryDark: '#170F0C',
};

Step 3: Import and use the Colors file.

Now you can go to any file in your project and reference the colors you have set up in step 2 on any acceptable property.

If any time your brand colors change, these files will update automatically!

import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import colors from '../styles/colors'; <-----------


const ContactScreen = props => {
  return (
   <View style={styles.header}>
    <Text style={styles.headline}>Contact Us</Text>
   </View>
  );
};

const styles = StyleSheet.create({
    header: {
      flex: 1,
      backgroundColor: colors.secondaryLight, <-----------
    },
    headline: {
        color: colors.primary, <-----------
    },
});

export default ContactScreen;

Thumbnail designed with Adobe Photoshop

How puzzles 🧩 help me code 💻

Gedalya Krycer — Mon, 17 May 2021 11:07:14 +0000

Ok, I know what you are probably thinking...

This post will be about how puzzles train your brain to solve more complex problems, just like practicing with HackerRank or LeetCode.

However, this is not that kind of post.

Doing puzzles have not helped me to become a cleverer developer.

Rather, puzzles help me set a healthier expectation on how to define progress.

Let's rewind a bit...

A few months ago I got a lovely welcome package from my new team at Planning Center.

One of the items was a puzzle that when completed, shows some of our main products as the MCU Avenger characters. Super cool!

Now, I don't enjoy doing puzzles. Since childhood, they have given me headaches. But, I do love the Avengers and if I could learn JavaScript, could this really be much harder? 😆

So one afternoon I dumped all the puzzle pieces out and gave it a shot. I immediately felt overwhelmed. So many seemingly non-sensical shapes and colors.

I thought to myself "Ok, got to do at least something, right?"

So I spent the next 15 min separating all the edge pieces into a different pile. Admittedly, that one was smaller and less overwhelming to look at. Decided to call it a day at that point.

Later that week I needed to take a break during work and approached the pile of edged puzzle pieces.

After about 5 min I got 3 pieces to fit together. Nice! 🧩🧩🧩

The next day I got two more pieces together. 🧩🧩

That Friday I got another 8 pieces figured out!! 🧩🧩🧩🧩🧩🧩🧩🧩

By the next week, I had most of the edges done. 🎉

Today I moved to the middle and made some more progress on all the green pieces.

Taking it 5 min at a time made it actually enjoyable and validating to see it slowly take shape.

So how does this help you code again?

While working on this little puzzle side-project something dawned on me. I am making progress.

It is super slow, but each 5 min stretch of time spent on this is indeed contributing to the overall project. I don't need to solve the whole puzzle in one shot. I just need to get one puzzle piece figured out to move the whole thing forward.

I started to actively apply this idea in my designs and code...

It is so easy to beat myself up for spending 20 min on a function and not completing it. If I don't finish 100% of it, it can feel like all my efforts are for nothing.

However, is that really true?

What are the "puzzle pieces" that I did figure out? Did I find a good name for the function? Did I read 3 articles on guard clauses which will help me set up future conditionals? Did I find the right file to make an edit in a code base of 100 files?

These are small pieces, but they are all valid and necessary in getting the whole thing done.

Instead of being discouraged, these little achievements are all signs of progress that I can be encouraged by.

In conclusion

Doing this puzzle has been a reminder to be strategic and to have some grace.

Break down the big scary problem into easier-to-understand parts.
Don't discredit the small wins. They will lead to a much bigger victory.

Happy coding my friends! 🤓

OhSnap! Handy Terminal & Git Commands

Gedalya Krycer — Mon, 10 May 2021 12:56:44 +0000

The "OhSnap!" series explores bite-sized tips that you can apply today.

Here is a list of some helpful terminal and git commands for your viewing pleasure and my own future reference. 😉

Terminal Commands

Working With Spaces

cd Class\ Work

cd 'Class Work'

Use a backslash (\) to make "Class\ Work" equal "Class Work”.
Encapsulate the phrase with quote marks to preserve spaces between words.

Open project folder in VS Code

cd my-project-folder-name 

code .

Only show directories

ls -d */

Clear the terminal

cmd + k

clear

Go back to the main directory

cd ~

Show permissions

ls -l

Create a file

touch index.html

Create a folder/directory

mkdir my-project

Removes a file

rm index.html

Remove a folder

rm -r my-project

-r stands for “recursive”. It means to delete this thing and everything in it.

Copy a file/folder

cp img images

The first value is the original file/folder and the second value is what it is copied as.

Rename a file/folder name

mv old-name.html new-name.html

The first value is the original file/folder name and the second value is the new name.

Open folder in Finder

open .

Getting unstuck from hard-to-exit terminal screens

shift + z
shift + z

Git Commands

Show available local branches

git branch

Create new branch

git checkout -b feature-1

checkout moves to the new branch
-b creates a new branch
feature-1 name for branch

Push local branch to remote

git push origin feature-1

Switch to a new branch

git checkout main

Merge changes from one branch to another

git merge master

Navigate to the branch you want to work in
After the merge keyword, specify the branch that has the changes to be merged from

Grab all remote branches without merging

git fetch --all

Reset the local master with the remote version

git reset --hard origin/master

Remove non-committed changes from all branches and master since

git checkout -f

View differences between commits

git diff

To leave this view hit Q on the keyboard

Thumbnail designed with Figma

Create an email list with React + Mailchimp

Gedalya Krycer — Mon, 03 May 2021 13:04:24 +0000

In this tutorial...

We are going to build a custom subscriber form in React and connect it to a Mailchimp audience (list). ⚛️ 📤 🙉

In building this for a freelance project, I found it to be more complex than I had anticipated. So this post is an A-Z guide on how to do it and hopefully saves you some headaches!

To view the form live, click the "get updates" button in the navbar.
genhybridsystems.com

Some notes on this tutorial structure

To help simplify the steps, I will be presenting blocks of related code together, while hiding others. This way you can focus on just what is relevant for that step.

Also, the original site I built had this form in a modal. I tried to strip out any code specific to that modal for this tutorial.

However, if you want to review all the code at once + the modal specific code. I will include a complete gist at the end. 👍

Steps to success

1. Build a base sign-up form in Mailchimp

2. Get the `u` and `id` form values

3. Install `react-mailchimp-subscribe`

4. Create a component to hold the Mailchimp form

5. Create a `<CustomForm />` component

6. Set up `handleSubmit` function

7. Format status messages

8. Show confirmation screen with conditionals

9. Clear all fields on a successful form submission

10. Add form SCSS styles

Step 1 — Build a base sign-up form in Mailchimp

Before jumping into any React code, we need to first create a form in Mailchimp. This will power our custom form later on, from behind the scenes.

a1 — Go to the Audience section, select Signup forms from the sub-menu, and finally select the Form builder.

b1 — With a new form generated, scroll down the page to the Built It section.

c1 — For this tutorial, we just want to keep the "First Name", "Last Name" and "Email" fields. Go ahead and delete any other fields so it looks like the example above.

Step 2 — Get the `u` and `id` form values

a2 — Above the form, copy the Signup form URL and open it in a new tab.

b2 — Then right-click on the "Sign Up Form" page and select View page source.

c2 — Scroll way down the page, past all the CSS code in the <head>, until you get to the <form> section. (For me it was at line 860.)

There are 4 parts to copy and save for later reference...

The URL inside of the action="".
The value in the input field with name="u".
The value in the input field with name="id".
In the input field sections for Email, First Name, Last Name – take note of the for="" in each of them. For me they are named MERGE0, MERGE1, and MERGE2 respectively. We will reference these later in our form to map our own fields with these Mailchimp fields.

Step 3 — Install `react-mailchimp-subscribe`

As it turns out it isn't super straightforward to query the Mailchimp API on a static site.

After trying a bunch of options, I found that the npm package react-mailchimp-subscribe does a great job at handling the Mailchimp integration.



$ npm i react-mailchimp-subscribe

We will just need to feed it the url / u / id values from the last step and make some components. Easy peasy!!

Step 4 — Create a component to hold the Mailchimp form



import React from 'react';
import './mcFormStyles.scss';
import MailchimpSubscribe from "react-mailchimp-subscribe";

const MailchimpFormContainer = props => {
    return (
        <div className="mc__form-container">
            <MailchimpSubscribe />
        </div>
    );
};

export default MailchimpFormContainer;

a4 — Import React, your styles, and react-mailchimp-subscribe into your new component. I also placed the <MailchimpSubscribe /> component inside a div to help with positioning. (We will add styling later.)



import React from 'react';
import './mcFormStyles.scss';
import MailchimpSubscribe from "react-mailchimp-subscribe";

const MailchimpFormContainer = props => {

    const postUrl = `https://genhybridsystems.us1.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}&id=${process.env.REACT_APP_MAILCHIMP_ID}`;

    return (
        <div className="mc__form-container">
            <MailchimpSubscribe
                url={postUrl}
            />
        </div>
    );
};

export default MailchimpFormContainer;

b4 — Next create a variable called postUrl. (Actual name is up to you). Inside it, store the URL we copied from the form's action="" in step 2.

c4 — Then add the u and id keys from step 3 at the end of the URL. I suggest storing the actual values in a dotenv file and just referencing them in the url. (Remember to prepend the dotenv variables with "REACT_APP_".)

d4 — Finally pass the postUrl as a url prop on the <MailchimpSubscribe /> component.



import React from 'react';
import './mcFormStyles.scss';
import MailchimpSubscribe from "react-mailchimp-subscribe";

const MailchimpFormContainer = props => {

    const postUrl = `https://genhybridsystems.us1.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}&id=${process.env.REACT_APP_MAILCHIMP_ID}`;

    return (
        <div className="mc__form-container">
            <MailchimpSubscribe
                url={postUrl}
                render={({ subscribe, status, message }) => (
                    <CustomForm
                        status={status} 
                        message={message}
                        onValidated={formData => subscribe(formData)}
                    />
                )}
            />
        </div>
    );
};

export default MailchimpFormContainer;

e4 — After the url props add a render with a call back function. This callback function should return a <CustomForm /> component. (We will build this in Step 5.)

f4 — Within the render callback function, destructure the 3 values indicated below and pass them as props (also below) to the <CustomForm /> component.

Step 5 — Create a `<CustomForm />` component

This <CustomForm /> component can by all means be in its own file. To make it easier to see how the two related, I kept it in the same file as the MailchimpFormContainer. (Code example is below the instructions.)



import React, {useState} from 'react';
import './mcFormStyles.scss';
import MailchimpSubscribe from "react-mailchimp-subscribe";
import InputField from "../../ui/InputField/InputField";

const CustomForm = ({ status, message, onValidated }) => {

    const [email, setEmail] = useState('');
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    return ();
};

//MailchimpFormContainer Parent Component Below

a5 — Add useState to the React import.

I am also importing a custom InputField component to help control styling and basic validation. Check out my previous article to see how to build this.

Let's build a 3-in-1 form field component

Gedalya Krycer ・ Apr 19 '21

#react #tutorial #webdev #javascript

b5 — At the start of the function, destructure the three props that are passed in from the parent component during step 4.

c5 — Set up useState variables for each of our input fields. These will hold the values that the user types in.



import React, {useState} from 'react';
import './mcFormStyles.scss';
import MailchimpSubscribe from "react-mailchimp-subscribe";
import InputField from "../../ui/InputField/InputField";

const CustomForm = ({ status, message, onValidated }) => {

    const [email, setEmail] = useState('');
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    return (
      <form className="mc__form">
        <h3 className="mc__title">Join our email list for future updates.</h3>
        <div className="mc__field-container">
          <InputField
            label="First Name"
            onChangeHandler={setFirstName}
            type="text"
            value={firstName}
            placeholder="Jane"
            isRequired
          />

          <InputField
            label="Last Name"
            onChangeHandler={setLastName}
            type="text"
            value={lastName}
            placeholder="Doe"
            isRequired
          />

          <InputField
            label="Email"
            onChangeHandler={setEmail}
            type="email"
            value={email}
            placeholder="your@email.com"
            isRequired
          />

        </div>

        <InputField
          label="subscribe"
          type="submit"
          formValues={[email, firstName, lastName]}
        />
      </form>
    );
};

//MailchimpFormContainer Parent Component Below

d5 — Add a form element and within it another div to contain and position the input fields. (Styles to come later.)

e5 — Add input fields for "Email", "First Name" and "Last Name". Pass in the corresponding state for each value and onChange handler. (Remember that the above example is using my custom input fields, so it looks a little different than regular JSX.)

f5 — Outside of the div add a submit input field.

Step 6 — Set up `handleSubmit` function

Now that we got our input fields set up, it is time to send that data to Mailchimp. This is where the react-mailchimp-subscribe package really does all the heavy lifting. Most of the below code is actually provided by them. I'll do my best to describe (assume) what it all does.



// imports...

const CustomForm = ({ status, message, onValidated }) => {

  const [email, setEmail] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = (e) => {
        e.preventDefault();
        email &&
        firstName &&
        lastName &&
        email.indexOf("@") > -1 &&
        onValidated({
            EMAIL: email,
            MERGE1: firstName,
            MERGE2: lastName,
        });
    }

    return (
      <form 
        className="mc__form"
        onSubmit={(e) => handleSubmit(e)}
      >
        // form field code... 
      </form>
    );
};

//MailchimpFormContainer Parent Component Below

6a — Inside of the <Form> element adds an onSubmit function and passes in the event (e).

6b — Inside of that function (called handleSubmit) we have a few things going on...

Breakdown

e.preventDefault(); will stop the page from refreshing when the form submits and thereby preserving our state.
email && firstName && lastName && checks if our state values are "truthy". In other words, if a user misses a field, that state will be empty and thereby false. If so the form won't submit.
email.indexOf("@") > -1 checks if a @ has been included in the user input. If not the form won't submit.
onValidated() This one is very important! Remember in step 2 I instructed you to store the input field values from Mailchimp? (MERGE0, MERGE1, and MERGE2) We will use these names (except for MERGE0 which "EMAIL") and assign our state to them

Step 7 — Format status messages

Mailchimp's API sends back some really awesome status responses, in 3 categories.

Sending
Success
Error

The error status comes with really helpfully specific messages. For example, including a link back to Mailchimp to update your email, if the one you entered already exists.



// imports...

const CustomForm = ({ status, message, onValidated }) => {

  // states...

  const handleSubmit = (e) => {
       // •••
    }

    return (
      <form className="mc__form" onSubmit={(e) => handleSubmit(e)}>
        <h3 className="mc__title">Join our email list for future updates.</h3>

        {status === "sending" && (
          <div className="mc__alert mc__alert--sending">
            sending...
          </div>
        )}
        {status === "error" && (
          <div 
            className="mc__alert mc__alert--error"
            dangerouslySetInnerHTML={{ __html: message }}
          />
        )}
        {status === "success" && (
          <div
            className="mc__alert mc__alert--success"
            dangerouslySetInnerHTML={{ __html: message }}
          />
        )}

        <div className="mc__field-container">
        // form field code... 
        </div>
      </form>
    );
};

//MailchimpFormContainer Parent Component Below

7a — Right below the <h3> add some conditional JSX for if the status prop equal sending. Instead of a ternary operator, I am using the && operator to show the content if the value before is true. I also opted for some simple text that blinks with CSS animations. But you can totally render a cool spinner here instead.

7b — Next is the conditional JSX for when the status prop equals error. The content is pulled from the API and is set up based on react-mailchimp-subscribe's example. The classes for this section (covered later) will also include styles for any links that might be provided.

7c — Lastly add the conditional JSX for when the status prop equals success. The content is also pulled from the API and is set up based on react-mailchimp-subscribe's example.

Step 8 — Show confirmation screen with conditionals

Besides showing helpful messages we can use the success status response to show a confirmation in our modal. (We partly set this up in the step before.)



// imports...

const CustomForm = ({ status, message, onValidated }) => {

  // states...

  const handleSubmit = (e) => {
       // •••
    }

    return (
      <form className="mc__form" onSubmit={(e) => handleSubmit(e)}>

        <h3 className="mc__title">
          {status === "success" 
            ? "Success!" 
            : "Join our email list for future updates."
          }
        </h3>

        // error and sending status messages...

        {status === "success" && (
          <div
            className="mc__alert mc__alert--success"
            dangerouslySetInnerHTML={{ __html: message }}
          />
        )}

        {status !== "success" ? (
          <div className="mc__field-container">
            // form field code... 
          </div>
        ) : null}

        {
          status === 'success' ? <button
            onClick={() => setModalOpen(false)}
            className="g__justify-self-center">Close</button> : <InputField
                 label="subscribe"
                 type="submit"
                 formValues={[email, firstName, lastName]}
               />
        }
      </form>
    );
};

//MailchimpFormContainer Parent Component Below

8a — Starting with the <h3> we can use the status prop to show "Success!" if the form is submitted correctly.

8b — Next we can use the status prop to hide the input fields <div> on a success response. (It will be replaced by the success status message that we set up in step 7.)

8c — Lastly, we will use the status prop to change the submit button to a regular button that closes the modal. (This is very specific to my setup and uses a custom button component. If you don't have a modal you can totally just hide the submit button instead.)

Step 9 — Clear all fields on a successful form submission

Nice! We are almost there. The last thing (re: functionality) is to clear the state when we submit the form. That way the old values are not preserved when we successfully submit the form.



// imports...

const CustomForm = ({ status, message, onValidated }) => {

  // states...

  useEffect(() => {
    if(status === "success") clearFields();
  }, [status])

  const clearFields = () => {
    setFirstName('');
    setLastName('');
    setEmail('');
  }

  const handleSubmit = (e) => {
       // •••
    }

    return (
      <form className="mc__form" onSubmit={(e) => handleSubmit(e)}>
        // Form content...
      </form>
    );
};

//MailchimpFormContainer Parent Component Below

9a — Add useEffect to the React import.

9b — Create a function called clearFields that sets all the input field states to "".

9c — Call that function in a useEffect. It should only run if the status === "success".

9d — Lastly, set the useEffect dependency to look at status. That way every time it updates, the useEffect will run.

Step 10 — Add form SCSS styles

Ok final step! Let's style this sucker up.

It is worth noting the I am using SCSS and importing some custom variables. I'll include some comments to help explain what these are and what to do on your end.

Also, this is all based on the website's brand. By all means, change these styles to match your branding!



@use "../../../sassStyles/_variables" as v;
@use "../../../sassStyles/_mixins" as m;

 /* Styles the h3 */
.mc__title {
  max-width: 235px;
  text-align: center;

  /* Replace with your brand's main text color */
  color: v.$secondary1;
  margin: 25px auto 35px;


  /* Media query for breakpoints over 676px */
  @include m.smMinBreakPoint {
    margin: 0 auto 30px;
  }
}

/* Positions the form in the middle of the modal and ensures the content doesn't jump as status messages get added/removed */
.mc__form-container {
  width: 100%;
  margin: 0 auto;
  transition: height .2s ease;
}

/* Positions Text and form fields nicely in the middle with some spacing. */
.mc__form {
  display: grid;
  grid-template-rows: min-content min-content;
  grid-row-gap: 40px;
  justify-content: stretch;
  align-items: center;
  transition: height .2s ease;
}

/* Seperates the input fields vertically */
.mc__field-container {
  display: grid;
  grid-row-gap: 30px;
}

/* Provides styles for status messages */
.mc__alert {
  text-align: center;

  /* Imports my site's Google Font from another file */
  @include m.poppinsFontStack;

  /* If "sending" this will animate the text.*/
  /* Keyframes for this will be included below.*/
  &--sending {
    color: v.$highlight2;
    -webkit-animation: fade-loop 0.8s ease-in-out infinite alternate-reverse both;
    animation: fade-loop 0.8s ease-in-out infinite alternate-reverse both;
  }

  /* "success" status styles with text color */
  &--success {
    color: v.$secondary2;
    margin-top: -60px;
  }

  /* "error" status styles*/
  &--error {
    color: v.$warning;
    font-weight: bold;

    /* This addresses any links the error message includes */
    a {

      /* Select a high contrast color from your brand. */
      color: v.$highlight1;
      transition: .3s ease-in-out;
      font-weight: normal;
      display: block;
      margin-top: 5px;
      opacity: .7;

      &:hover {
        text-decoration: none;
        opacity: 1;
      }
    }
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2021-4-1 16:18:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-loop
 * ----------------------------------------
 */
@-webkit-keyframes fade-loop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-loop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Complete JSX Code

Thumbnail designed with Figma

165+ Developer Resources I Discovered in 2020-2021

Gedalya Krycer — Mon, 26 Apr 2021 12:56:03 +0000

Since starting to actively code in 2020, I have come across many helpful resources.

Some I have completed and others I still have in the queue. Hopefully, they will be helpful to you as well!

Resource Types

🎓 = Complete course on a subject(s)
🧰 = Tool that makes development easier
🧐 = Single article or video on a subject(s)

Resources Lists

• HTML

• CSS

• JavaScript

• React

• WordPress

• Git & CLI

• Hosting

• Optimizations

• Databases

• MISC Web Dev

• Career

• Design

HTML Resources

#	Title	My Thoughts	Type
1	Alt Text	Loved how it gave examples of what good alt text looks like.	🧐
2	HTML: `<!DOCTYPE>` tag	Especially helpful when I was first learning HTML syntax	🧐
3	W3S HTML5 Semantic Elements	Great quick intro to why everything shouldn't be in a `<div>`.	🧐
4	MDN HTML elements reference	Ready to go to the next level? This guide goes even deeper in the many HTML elements.	🧐
5	New Structural Elements in HTML5	This guide really helped me understand elements like `<figure>` and `<figcaption>`	🧐
6	HTML5 Periodical Table	I love how interactive, yet simplified this approach is to learning the elements.	🧐
7	Scripts: async, defer	This taught me different ways to load JS into html files, drastically improving performance.	🧐
8	Learn to Code HTML & CSS	Took this course to prepare for the bootcamp. Great intro to HTML.	🎓
9	Learn to Code Advanced HTML & CSS	I really enjoyed the above beginner course and looking forward to taking this one.	🎓
10	Derek Banas Handlebars Tutorial	Not technically HTML, but it sure helps you write it efficiently. Looking forward to viewing this tutorial.	🧐
11	metatags.io	One of my favorite generators for creating meta tags for multiple social media platforms.	🧰
12	A Complete Guide to Links and Buttons	Using the right tool for the right job is never more apparent in this deep-dive comparison article.	🧐
13	getwaves.io	Love this tool! Generate svg waves, to create curved separations for page sections!	🧰

Go to 🔝

CSS Resources

#	Title	My Thoughts	Type
14	Bootstrap Documentation	Even if I am not using the framework I love using their documentation for inspiration on common web components.	🧐
15	Specifics on CSS Specificity	Great breakdown by CSS-Tricks and has nice graphic examples at the end.	🧐
16	CSS Box Sizing	Very easy to approach example of how the box-model works.	🧐
17	12 tips for amazing CSS animation	This has so many good tips on creating cool animations and making sure they are performant.	🧐
18	CSS Layout and Animations	Haven't taken this one yet, but can't wait to do so. The course designs are top notch.	🎓
19	Net Ninja SASS Tutorial	This was my first course on SASS and still refer back to it from time to time.	🎓
20	Learn Sass In 20 Minutes	This is great for a first primer into what SASS is.	🎓
21	BEM and SASS: A Perfect Match	This blew my mind when introduced how BEM and SASS could be used together.	🧐
22	getbem.com	This gives an overview from the creators of the popular naming convention.	🧐
23	CSS-Tricks BEM 101	I love the button examples that this article gives on how to use BEM.	🧐
24	BEM by Example	This explanation on BEM is really good, but I especially like how they have a short and full versions of the article.	🧐
25	MDN Display Docs	Everything you could ever want to know about the powerful `display` property.	🧐
26	A Couple of Use Cases for Calc()	`calc()` is one of the more powerful features in CSS and this article shows some great use cases for it.	🧐
27	Wes Bos CSS Grid	You can't argue with free and that Wes Bos is one of the best teachers out there for development.	🎓
28	Wes Bos Flexbox	See above, but this time for Flexbox	🎓
29	CSSmatic	Collection of powerful css generators for gradients, border radius, noise texture and box shadows.	🧰
30	CSS Tricks Position	If I could have access to only one resource for the `position` property, this would be it.	🧐
31	Can I Use?	This site lets you know the browser support for every property out there.	🧰
32	yoksel Flex Cheatsheet	I love the layout and way it lets you visually preview the flexbox properties.	🧐
33	The 30 CSS Selectors You Must Memorize	When I feel like getting into the weeds of CSS selectors, (sorry BEM) this is the article I refer back to.	🧐
34	CSS Lint	This tool will check your code and highlight any errors.	🧰
35	System Font Stack	Predefined font fallback stacks that can be plugged into a project.	🧰
36	Neumorphism.io	This tool makes elements look like they are just under the surface of the page.	🧰
37	Advanced CSS and Sass: Flexbox, Grid, Animations and More!	Bought this amazing course on Udemy but haven't gotten a chance to take it yet...one day soon though!	🎓
38	CSS Scroll Shadows	This tool generates shadows that appear based on scroll position with just CSS!	🧰

Go to 🔝

JavaScript Resources

#	Title	My Thoughts	Type
39	javascript.info	This is one of the complete and well explained overview of JS.	🧐
40	Code Beautify	Before getting into ESlint, I really liked this tool to make sure my JS was all kosher.	🧰
41	Truthy and Falsy: When All is Not Equal in JavaScript	This article is a great refernce for all the instances that a value might be considered true or false.	🧐
42	What the heck is the event loop anyway?	I have not watched this yet, but looking forward to it.	🧐
43	JavaScript Loops	If I could only watch one video to understand common JS loops, this would be the one.	🧐
44	JavaScript Loops	If I could only read one article to understand common JS loops, this would be the one.	🧐
45	Codecademy JS Cheatsheet	Totally free and a nice collection of common JS elements and concepts.	🧐
46	MDN JS String	Everything I'd ever want to know about strings and where to use them.	🧐
47	JSON Parse v JSON Stringify	These JSON functions confused me to no end. This article really helped explain the differences.	🧐
48	Google Hosted Library jQuery	Bookmark this link. :) It has the latest jQuery cdn script at all time.	🧰
49	Public APIs	Great list of public APIs that you can use projects today!	🧰
50	Javascript Event Delegation	Awesome visual representation of what events are and how event delegation works.	🧐
51	Var, Let, and Const – What's the Difference?	Great introduction to the different variable types (and why `var` is trash.)	🧐
52	5 Differences Between Arrow and Regular Functions	I love how this demystifies how the two function types are used.	🧐
53	JavaScript DOM Crash Course - Part 1	Discover how to select elements in the DOM to be used with JS	🎓
54	JavaScript DOM Crash Course - Part 2	Learn the basics of how to traverse the DOM.	🎓
55	JavaScript DOM Crash Course - Part 3	Learn how to attach attach events to DOM elements.	🎓
56	JavaScript DOM Crash Course - Part 4	Build a small project based on the last 3 videos.	🎓
57	Introduction to the DOM	Another great resource on the DOM, this quick article will get you up and running.	🧐
58	Asynchronous Javascript	I forgot I bookmarked this until now. This an awesome free course by the Net Ninja.	🧐
59	Code Wars Kata	This awesomely themed training tool lets you practice your sweet Javascript skills.	🧰
60	What Is Event Bubbling in JavaScript?	Another great resource on what event bubbling is and how to take advantage of it.	🧐
61	JavaScript Event Delegation is Easier than You Think	Learn how to trigger and listen to events correctly.	🧐
62	Which HTML element is the target of the event?	Find out which element was interacted with.	🧐
63	Understanding Scope in JavaScript	Love the design of this site and it does a thorough job of explaining scope.	🧐
64	Different ways of writing a function in JavaScript	Quick article on how to write a "Function Declaration" function.	🧐
65	JavaScript Image Slider for Beginners	This teaches how to build a simple image slider with Vanilla JS.	🧐
66	Learn the smart, efficient way to test any JavaScript application.	I have not taken this one yet, but looking forward to it—as it is such an important subject!	🎓
67	JavaScript Algorithms and Data Structures Masterclass	I am not a fan of algorithms, but that is why I have this course bookmarked!	🧐
68	AJAX Basics	Everything you ever wanted to know about making AJAX requests to a web server.	🎓
69	How to Connect to an API with JavaScript	This article really helped me understand how API calls can be used in projects.	🧐
70	JSON Tutorial: Request API Data with JavaScript or PHP	It's so interesting to see how PHP and JavaScript handle JSON differently.	🧐
71	Basics Of JavaScript Reduce Method	This short article does such a great job of breaking down this powerful JS method.	🧐
72	Axios or fetch(): Which should you use?	I tend to reach for Axios, but this article does a great job explaining both.	🧐
73	Learn JavaScript Start	I took this 30-hour course and it is amazing. Does a great job explaining the basics.	🎓
74	validatejs.org	Great tool to use on sign-up and login forms to make sure the user data is correct.	🧰
75	HTML5 Canvas Tutorial for Beginners	As a designer, this is one I am very excited about diving into.	🧐

Go to 🔝

React Resources

#	Title	My Thoughts	Type
76	React Cheat Sheet	Quick and easy to skim cheat sheet on common React patterns and pieces.	🧰
77	Fullstack Advanced React & GraphQL	Little pricer then Udemy, but no one teaches like Wes Bos. Hopefully will be able to purchase this one soon.	🎓
78	React Developer Tools	This lets you view props, components, renders and more right in Chrome DevTools	🧰
79	React Icons	This is one of my favorite icon packages, because it has almost every major icon library out there.	🧰
80	React - The Complete Guide (incl Hooks, React Router, Redux)	One of my favorite courses and has prepared me so much to code in React.	🎓
81	Examples of the useReducer Hook	This article / video breaks down a very cool hook lets you get a "Redux-like" store without downloading the library.	🧐
82	MDX Documentation	This syntax combines JSX and Markdown in one!	🎓
83	React For Designers	This features some great courses and beginner projects for getting started in React.	🎓
84	React Router Bootstrap	Get the power of React Router navigation and the stylings of Bootstrap mixed into one.	🧰
85	React Helmet	I really want to learn this package. It lets you add SEO meta tags to different "React Pages"	🧰
86	Code splitting with React.lazy and Suspense	This really works! After implementing on my website my performance scores improved.	🧐
87	33 Validation Examples	Awesome collection of form validation and demo code for React.	🧐
88	37 ReactJS basics useRef Hook	Helpful video on how to work with the React hook `useRef`.	🧐
89	npm react-validation	Robust package to set up form validation. Need to dive deeper one day to learn all it can do.	🧰
90	Formsy React	This package lets you build custom forms and it takes care of the validation for you.	🧰
91	Styled Componets	A favorite with React users, allowing you to create CSS focused custom components.	🧰
92	React inline styles and media queries using a custom React Hook	This article helped me mimic responsive styling within the JSX environment.	🧐
93	React Bootstrap	Really good documentation on using bootstrap with React.	🧐
94	React Redux Using Hooks	Work with the modern Hook syntax for Redux. This saved me so much time!	🧐
95	Why can't I directly modify a component's state, really?	This explains so well why you must use `setState` for changing state in class components.	🧐
96	React: Communication Between Components	Great deep dive into how React components pass data to one another.	🧐
97	How to identify and resolve wasted renders in React	Performance is everything and this teaches how to work with renders correctly.	🧐
98	Components and Props	One of the core and most visited pages in the React Documentation for me.	🧐
99	Setting Up Redux DevTools	Redux DevTools is not the most straightforward thing for me to set up, but this helped explain the process well.	🧐
100	React Redux Easy Peasy Course	Haven't watched this beginner course on Redux yet, but heard good things.	🎓
101	Gatsby JS	So excited to work with this static site generator very soon.	🧰
102	MERN Stack Front To Back	Purchased this course but have not taken it yet. Very excited to do so soon as it covers so much.	🎓
103	React Native The Practical Guide	In the middle of taking this now and love all the detail it goes into.	🎓

Go to 🔝

WordPress Resources

#	Title	My Thoughts	Type
104	How to Create a Custom WordPress Theme - Full Course	Wonderful introduction to custom theming in WordPress.	🎓
105	WordPress Basics	All the videos are very well broken out.	🎓
106	WordPress 101 for Beginner Developers	Another great playlist on the basics of WordPress.	🎓
107	Create a Premium WordPress Theme	Haven't taken this one, but there are a lot of helpful video topics in this playlist.	🎓
108	Customizing WordPress	Really helpful playlist on advanced WordPress theme topics.	🎓
109	WordPress Intermediate Skills	I like that this course covers working with a server as well.	🎓
110	How to install WordPress on your local computer with MAMP (Mac)	This video taught me how to work with WordPress locally on my machine.	🧐
111	wphierarchy.com	This website does a great job in explaining all the different file types in WordPress and their importance levels.	🧐
112	Including CSS & JavaScript	Documentation on using CSS & JS in WordPress.	🧐

Go to 🔝

Git & CLI Resources

#	Title	My Thoughts	Type
113	Comparing Git Workflows	This was so helpful in understanding there are different Git workflows for each team need.	🧐
114	Command Line Power User	Can't wait to become a true terminal master with this course.	🎓
115	Learn Git Branching	This interactive course was so helpful in understanding how branching worked.	🎓
116	GITHUB PULL REQUEST, Branching, Merging & Team Workflow	Great overview of how it looks to work with a team in a Git workflow.	🧐
117	Mastering Markdown	Such a great resource for seeing common Markdown syntax and upgrading Git README	🧐
118	Mastering Markdown	Super helpful when I first started using Git for version control.	🧐
119	Basic Git Commands	Another great cheat sheet on common git commands.	🧐
120	GitHub Guide Hello World	Get started with Github with this very user friendly guide.	🧐
121	Git Commands	Very visual approach for common Git commands.	🧐
122	Short Code Git Cheat Sheet	Searchable cheatsheet	🧐
123	List of Command Line Commands	Awesome list by Codecademy on many CLI terminal commands.	🧐

Go to 🔝

Hosting Resources

#	Title	My Thoughts	Type
124	Netlify Build	Awesome Netlify process to trigger builds to the live site once a specific branch is updated.	🧰
125	Netlify Tutorials	Free course to get up and running with Netlify hosting	🎓
126	Simple Contact Form Submission With Netlify	Easy tutorial on how to set up Netlify as the mail server.	🧐
127	PHPStorm FTP Server Connection to Remote Host	Tutorial on how to connect with SFTP or FTP with PHPStorm. (It makes it a joy compared to VS Code)	🧐

Go to 🔝

Optimization Resources

#	Title	My Thoughts	Type
128	Front End Web Optimization Workflow	Can't wait to take this one and learn about CDNs and optimizing assets	🎓
129	`rel=canonical`: the ultimate guide	Such a good description of what Canonical urls are and where to use them.	🧐
130	MDN Lazy Loading	Great place to start to learn how Lazy loading works.	🧐
131	SEO Web Development Tutorial for Beginners	Awesome intro for what SEO is and how to approach it.	🧐
132	MOZ Page Speed	This shows a bunch of areas to check for poor page speeds.	🧐
133	The Art of Debugging	Fascinating deep dive on the process of debugging a website and tools to help.	🧐

Go to 🔝

Databases Resources

#	Title	My Thoughts	Type
134	Introduction to Mongoose for MongoDB	This article thoroughly explains what MongoDB is and why it is essential to use Mongoose with it.	🧐
135	Restful Routes, What are they?	I did not fully understand RESTful API calls until reading this.	🧐
136	HTTP response status codes	Code 418 is the best. ;)	🧐
137	Passport	Great tool to use for full-stack user authentication	🧰

Go to 🔝

MISC Web Dev Resources

#	Title	My Thoughts	Type
138	Working with Code Written by Someone Else	Wonderful tips in how to explore a new codebase.	🧐
139	Markdown Table Generator	This is how I made the tables in this post ;)	🧰
140	Jest	One of the industry testing frameworks used for test driven development.	🧰
141	Foundation for Emails	This framework makes it easy to code responsive HTML emails.	🧰
142	Zurb Foundation for Email Course	Great course for the above email framework.	🎓
143	NPM dotenv	This package lets you secure sensitive information like API keys within projects.	🧰
144	typing.io	I used this before the bootcamp to practice typing code faster.	🧰
145	Google Maps Platform Documentation	Api documentation for using Google Maps in projects.	🧐
146	What Is and How Does Single Sign-On Authentication Work?	This was so helpful in helping me understand at a high-level how SSO works	🧐
147	Subdomains vs. Subfolders: Which Is Better for SEO & Why?	Very interesting article on how to structure loosely related web content.	🧐
148	favicon.io	This is my favorite Favicon generator (small icon in browser tab) and has a great interface.	🧰
149	Wes Bos Eslint Config	Download the settings that Wes Bos uses for linting his code.	🧐
150	Emmet Cheat Sheet	Super helpful reference to common Emmet commands in multiple languages	🧐
151	Learn Jetbrains PHPStorm IDE	This became my favorite IDE and love all their resources on how to use it correctly.	🧐
152	Agile Scrum Development Process and How UI/UX Design Fit In	Really good overview of how Agile workflows are set up.	🧐

Go to 🔝

Career Resources

#	Title	My Thoughts	Type
153	The Golden Guide to Landing a Developer Position	An incredible guide on preparing hiring material like resumes to interviewing with examples.	🧐
154	Learn How To Learn	Can't wait to take this one and learn how to be a better "learner".	🎓
155	Glassdoor Common Interview Questions	List of 50 questions that can be asked in interviews	🧐
156	How to Tackle Something You Have No Idea How to Do	This is one of my favorite articles and I often refer back to it for motivation.	🧐
157	Practice for the Whiteboarding Interview	Helpful links and guide to doing a Whiteboarding interview.	🎓
158	How to: Work at Google — Example Coding/Engineering Interview	Very interesting to see the level of interviewing at Google.	🧐
159	jobscan.co	Helpful site that optimizes cover letters and resumes.	🧰

Go to 🔝

Design Resources

#	Title	My Thoughts	Type
160	Rapid Website Prototyping	Learning how to quickly mockup feature ideas and this covers many important areas of how to do it.	🎓
161	Tree House UX Design	This course covers so many important UX subjects and how to think through design.	🎓
162	Flux Free Web Design Course 2020	One of the best free courses in the basics of Web Design.	🎓
163	Build it in Figma: Design a responsive website	This video goes deep into using auto layout in Figma.	🧐
164	In the file: A look into building selection colors and OpenType	Haven't seen this one yet, but can't wait to go through it.	🧐
165	In the File: Making data-informed design decisions	Such a fascinating webinar on how big brands take data into account when creating designs or making changes.	🧐
166	In the File: Developer and designer, working together to build design systems	Another one I can't wait to watch. Truly effective teams have clear communication between design and development early in the process.	🧐
167	Build it in Figma: Design a responsive website navigation	There are many design tidbits and Figma tricks backed into this one.	🧐

Go to 🔝

Nice job making it to the end!

Here is a happy dance Gif to celebrate upgrading your sweet skills!

Thumbnail designed with photoshop and unsplash

Let's build a 3-in-1 form field component

Gedalya Krycer — Mon, 19 Apr 2021 12:51:59 +0000

Three for the price of one...

In this post, we are going to build a robust contact form with validation – using one input field component!

Why is this helpful? If you ever need to change the styles or functionality globally, you can do so in just this file.

I'd love to show you how it works today!

What we are going to build:

How to build the component

We are going to start by building our custom component InputField. Once that is set up, we will look at styling and the parent Form component that holds everything.

Steps

Set up InputField base code
Add the first input field into the if statement
Add the second input field into the if statement
Add the final input field into the if statement
Add input validator helper function
Add InputField styles
Setup Contact Form parent component
Add our custom InputField components

1 — Set up `InputField` base code

import React from 'react';
import './inputFieldStyles.scss';

const InputField = props => {


    if (props.type === "submit") {
        return (

        )
    } else if (props.type === "textarea") {
        return (


        );
    } else {
        return (

        );
    }


};

export default React.memo(InputField);

Breakdown

We start by importing React and an SCSS stylesheet.
Inside our InputField component we will use an if statement to determine what type of input element we want to render.
Our component will receive multiple props and the first one is props.type. Among other places, we will use type to choose the correct input.
At the bottom, we export the component and wrap around the Higher-Order React component memo. This will make sure our component won't re-render if its props haven’t change.

Back to 🔝

2 — Add the first input field into the if statement

import React from 'react';
import './inputFieldStyles.scss';

const InputField = props => {


    if (props.type === "submit") {
        return (

        )
    } else if (props.type === "textarea") {
        return (


        );
    } else {
        return (
            <label className="inputField__label">
                {props.label}
                <input
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    type={props.type}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    name={props.name}
                />
            </label>
        );
    }


};

export default React.memo(InputField);

Breakdown

Starting from the bottom else statement we have added our first possible input field to render.
It is wrapped in a <label>, with a props.label so we can dynamically pass in a name as a string. This text will appear above the form field and will also focus on the field if clicked.
The onChange holds props.onChangeHandler which passes back the input field's data to the parent form component.
The type holds the props.type. In this instance, it is used to tell if this field's functionality should be for an email, text, tel, etc
The placeholder holds the props.placeholder string and will show some greyed-out text before the user types.
The value holds the props.value which is actually the parent passing back in the onChangeHandler. This will show the text inside the field in a controlled way.
The required holds a boolean, which is passed in via props.isRequired. If this is added in the parent component, the field will be required. If left off it won't.
The name is passed in via props.name. This is especially helpful with a Netlify mail server.

Back to 🔝

3 — Add the second input field into the if statement

import React from 'react';
import './inputFieldStyles.scss';

const InputField = props => {


    if (props.type === "submit") {
        return (

        )
    } else if (props.type === "textarea") {
        return (
           <label className="inputField__label">
                {props.label}
                <textarea
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    rows={7}
                    name={props.name}
                />
            </label>
        );
    } else {
        return (
            <label className="inputField__label">
                {props.label}
                <input
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    type={props.type}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    name={props.name}
                />
            </label>
        );
    }


};

export default React.memo(InputField);

Breakdown

Moving up to the else if statement we have now added our <textarea> field to render.
The props it receives are very similar to the input field below it, with one addition.
The rows does not receive a prop in my example, but totally can if you wish to make it dynamic. The number placed as its value will determine how tall the <textarea> is. The above example will support 7 lines of user text.

Back to 🔝

4 — Add the final input field into the if statement

import React from 'react';
import './inputFieldStyles.scss';

const InputField = props => {


    if (props.type === "submit") {
        return (
            <input
                className='primaryBtn primaryBtn--big g__justify-self-center'
                type='submit'
                value={props.label}
                disabled={validateInput(props.formValues)}
            />
        )
    } else if (props.type === "textarea") {
        return (
           <label className="inputField__label">
                {props.label}
                <textarea
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    rows={7}
                    name={props.name}
                />
            </label>
        );
    } else {
        return (
            <label className="inputField__label">
                {props.label}
                <input
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    type={props.type}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    name={props.name}
                />
            </label>
        );
    }


};

export default React.memo(InputField);

Breakdown

Moving up to the top if statement we have now added our <input type="submit"> field to render.
This input will be the submit button for our forms.
The value takes in a props.label because this is technically the label or button text. (Such as "Submit", "Send", "Confirm", etc)
The disabled method takes in a custom function that also passes in an array from props called props.formValues. This will be explained in the next step.

Back to 🔝

5 — Add input validator helper function

import React from 'react';
import './inputFieldStyles.scss';

const InputField = props => {

  const validateInput = values => {
        if (values.some(f => f === "") || values[0].indexOf("@") === -1) {
            return true
        } else {
            return false
        }
    }

    if (props.type === "submit") {
        return (
            <input
                className='primaryBtn primaryBtn--big g__justify-self-center'
                type='submit'
                value={props.label}
                disabled={validateInput(props.formValues)}
            />
        )
    } else if (props.type === "textarea") {
        return (
           <label className="inputField__label">
                {props.label}
                <textarea
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    rows={7}
                    name={props.name}
                />
            </label>
        );
    } else {
        return (
            <label className="inputField__label">
                {props.label}
                <input
                    onChange={(e) => props.onChangeHandler(e.target.value)}
                    type={props.type}
                    placeholder={props.placeholder}
                    value={props.value}
                    required={props.isRequired}
                    className="inputField__field"
                    name={props.name}
                />
            </label>
        );
    }


};

export default React.memo(InputField);

Breakdown

This function is used in the input type="submit"disabled field.
It takes in an array of all the form values. This was passed down as props from the parent component. It's important to note that the email value will always be the first item in this array.
The function checks if any of the values in the array empty using the .some() method. If true, then the function will return true and the button will be disabled.
It then checks if the email value contains an "@". If not, then the function will return true and the submit input will also be disabled.
In all other cases the function will return false and the submit input will *not be disabled. (Remember that disabled={false} will keep the input active.)

Back to 🔝

6 — Add `InputField` styles

@use "../../../sassStyles/_variables" as v;
@use "../../../sassStyles/_mixins" as m;

.inputField__label {
  display: grid;
  grid-row-gap: 10px;
  color: v.$secondary2;
  font-size: 16px;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  @include m.poppinsFontStack;

  @include m.smMinBreakPoint {
    font-size: 18px;
  }
}

.inputField__field {
  @include m.poppinsFontStack;
  background-color: v.$primaryDark3;
  border: none;
  font-size: 16px;
  padding: 16px 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  font-weight: bold;
  color: v.$secondary2;

  @include m.smMinBreakPoint {
    font-size: 18px;
    padding: 20px 25px;
  }
}

::placeholder { /* Firefox */
  font-weight: normal;
  color: v.$primary
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: v.$primary;
  font-weight: normal;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: v.$primary;
  font-weight: normal;
}

input[disabled] {
  background-color: v.$primaryDark2;
  cursor: default;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);

  &:hover {
    background-color: v.$primaryDark2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transform: scale(1);
  }
}

Breakdown

These styles are applied to the labels, inputs, placeholders, and even the disabled states.
I am importing SCSS mixins for pre-determined breakpoints and variables for colors. But you can easily replace them with media queries and hex color codes.

Back to 🔝

7 — Setup Contact Form parent component

import React, {useState} from 'react';
import './contactFormStyles.scss';
import InputField from "../../ui/InputField/InputField";

const ContactForm = props => {

    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const [message, setMessage] = useState('');

    const coolFunctionHandler = e => {
      // your code here
    }


    return (
      <form className="mc__form" onSubmit={(e) => coolFunctionHandler(e)}>



      </form>
    )
}

export default ContactForm;

Breakdown

This component is the base for the Contact Form.
We are importing React, styles, and our custom InputForm components
We are setting up states for each input field in our form. (Not including the submit input). These will hold the values that our users enter.
The onSubmit on the <form> will can contain any next steps you want to happen once the form is submitted.

Back to 🔝

7 — Add our custom `InputField` components

import React, {useState} from 'react';
import './contactFormStyles.scss';
import InputField from "../../ui/InputField/InputField";

const ContactForm = props => {

    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const [message, setMessage] = useState('');

    const coolFunctionHandler = e => {
      // your code here
    }


    return (
      <form className="mc__form" onSubmit={(e) => coolFunctionHandler(e)}>

        <InputField
          label="Name"
          onChangeHandler={setName}
          type="text"
          value={name}
          placeholder="Jane Smith"
          isRequired
          name="name"
        />

        <InputField
          label="Email"
          onChangeHandler={setEmail}
          type="email"
          value={email}
          placeholder="your@email.com"
          isRequired
          name="email"
        />

        <InputField
          label="Message"
          onChangeHandler={setMessage}
          type="textarea"
          value={message}
          placeholder="How can we help..."
          isRequired
          name="message"
        />

        <InputField
          label="send"
          type="submit"
          formValues={[email, name, message]}
        />

      </form>
    )
}

export default ContactForm;

Breakdown

Now we add in our custom InputField components and pass in the prop values that we previously set up.
Note how the last <InputField /> takes in an array on the formValues prop, with email being the first item. This is for the validation and making sure it isn't active if there is a single missing field or invalid email entry.

Back to 🔝

Summary

It definitely took a few steps, but now you have a super robust component to use across all your website's forms! Over the long run, this setup will save a lot of time.

Happy Coding! 🤓

Thumbnail designed with Figma

Shape Up — A Workflow That Actually Empowers Product Teams

Gedalya Krycer — Mon, 12 Apr 2021 20:12:40 +0000

TL;DR

This article outlines some of the challenges that development teams can face and how the Shape Up workflow methodology looks to solve them.

Here is an interesting thought...

A project's success might not always be related to how beautiful the design looks or performant the codebase is.

Let's consider these examples...

Can a designer create a user-friendly screen without a clear understanding of the actual problem the customer is facing?
Can a developer give an accurate time estimate without getting a chance to test out a new API they never used?
Can a product manager keep a project on track without being able to see what is completed and what is left to do?
Can a CEO sign off on a new feature without feeling confident that its benefit will be worth the time spent on it?

Often times great ideas and the talented teams executing them succeed when pivotal workflow areas are also successful.

Discovering the Shape Up workflow methodology

Recently I was introduced to a process called Shape Up that looks to solve many of the issues mentioned above.

It was developed by the team at Basecamp, a company that builds project management software. (Seems fitting.)

They found it worked so well on shipping (lanching) their own features — they turned it into a book to help others.

"Shape Up: Stop Running in Circles and Ship Work that Matters".

I just finished reading it and am so excited to start using this at work!

Below are my key takeaways for each chapter. There is a lot more in the book, so be sure to read it afterward as well!

Chapter 1: Introduction

This chapter outlines the common challenges the Basecamp team saw when shipping new product features. It establishes their "why" for formulating Shape Up.

🙌 What stood out to me...

...the overall structure of the Shape Up methodology. All of their principles (and book chapters) are divided up into 3 main sections.

Shaping (Ch. 2 – 6)
Betting (Ch. 7 – 9)
Building (Ch. 10 – 15)

These sections made it easier for me to understand where and why stages exist where they do.

Chapter 2: Principles of Shaping

A key concept in Shape Up is called Shaping. This is the process of deciding which problem to solve and figuring out what is needed to solve it.

The goal is to take an abstract idea and turn it into a well-defined project for the team to build.

🙌 What stood out to me...

...is this shaping stage is done in private with 1-2 senior team members. It allows them to quickly and freely run through ideas without being distracted by (usually well-meant) input from others.

The coming chapters will explain in-depth the properties that make shaping process successful.

Chapter 3: Set Boundaries

When shaping an idea, one of the first things done is to set boundaries on it. This helps clarify what the project should be about and where it should stop.

🙌 What stood out to me...

...was one of the boundaries called setting an appetite.

This is where the product team selects a pre-determined timeframe called a cycle and then designs a realistic solution that can be executed within it. Once the cycle ends, whatever work is done must be shipped or everything is scrapped.

Contrast this with creating a "perfect" design first and then estimating it afterward. Sure it looks great, but it might take 6 months to actually ship.

Chapter 4: Find the Elements

Next, the person(s) shaping will conceptualize what to build.

For example, if the goal is to "add an auto-pay option", this is where they will decide what screen it should be accessed on.

🙌 What stood out to me...

...was the emphasis on not trying to solve design problems at this stage.

Building a wireframe now would only slow the brainstorming down and take choices away from the designer later on. Instead, it was recommended to draw sketches with a fat marker which are visual, but not overly specific.

Chapter 5: Risks and Rabbit Holes

After a tangible direction is shaped, it is vital to identify as many potential issues as possible.

Some potential issues posed in the book...

Does this require new technical work we’ve never done before?
Are we making assumptions about how the parts fit together?
Are we assuming a design solution exists that we couldn’t come up with ourselves?
Is there a hard decision we should settle in advance so it doesn’t trip up the team?

🙌 What stood out to me...

...is how unresolved core questions are not passed down to the design or development team.

As much as possible the approach is worked out in the shaping process, so there are minimal unknowns. If there is an obvious grey area, it doesn't make it into the cycle.

Chapter 6: Write the Pitch

Now that the solution has been shaped it is time to pull all of the information into a concise pitch.

Included sections...

Problem
Appetite
Solution
Rabbit holes
No-goes

🙌 What stood out to me...

...is how the Pitch puts all the cards on the table.

It is advised to clearly define the problem, in addition to the solution. A well-defined problem will give context to why the proposed solution is the right one.

Any potential issues are also highlighted so well-informed decisions can be made.

This also includes specific features that should not be built as part of this project.

I love how the goal is not about building the ultimate project, but rather the most realistic and therefore impactful one.

Chapter 7: Bets, Not Backlogs

Unlike an Agile model, there isn't some large central list of feature requests that get constantly added to and reprioritized.

Instead, key stakeholders only decide or bet on a few pitches for one cycle at a time.

🙌 What stood out to me...

... were pitches that are not selected for a cycle, are also not preserved in an official way.

By not tracking pitches officially, there isn't an overwhelming list of features to consider when it is time to plan a cycle.

Also, pitches that were not picked could usually stand more shaping. An individual team member could always re-work it and re-present it for a later cycle.

Chapter 8: The Betting Table

The key decision-makers (CEO, CTO, Product Manager) will meet before a cycle and determine what should be worked on. They place bets on pitches they feel are worth the risk and time investment.

This meeting is very focused and productive. Key areas are predefined, which gives this leadership team parameters to place their bets on. This gives them confidence.

Cycles are usually only 6-weeks long. (2-weeks for really small projects.)
In between cycles there is a 2-week cool down period to plan the next cycle, fix bugs, and work on misc projects.
The team building the project is usually a designer, 1-2 programmers, and sometimes a QA specialist.
Once the cycle is done a circuit breaker happens. That means if the project isn't finished, the deadline can't be extended and the project is scrapped. (In most cases.)

🙌 What stood out to me...

...because there is a real belief (bet) that the pitch is worth building, leadership will let the product team focus fully on it.

In other settings, a programmer might work on 4-5 different projects in a day. But in this setting, if the project doesn't get done in the 6-week cycle, that is it. The investment would be lost.

With Shape Up, product teams are given the space to focus on just the project(s) dedicated in the given cycle. This uninterrupted focus sets them up for success.

Chapter 9: Place Your Bets

In addition to the parameters described above, leadership takes into account what they are actually building. Is it adding a feature to an existing product or starting from scratch?

🙌 What stood out to me...

...when building a new product the standard stages change, but the core principles of shaping and cycles stay true.

Stages for new products are defined as R&D, Production and Cleanup.

For example, in the R&D stage, the shaping and build phases are typically carried out by only the senior members of the company.

Work done during an R&D cycle is not to ship, but to validate assumptions. If at the end of the cycle the leadership team confirms that feature A didn't pan out, then that is still a win. It means that the product team should probably focus on feature B later on.

Chapter 10: Hand Over Responsibility

Now that the pitch(s) has been approved, the cycle can begin! Product managers release the details to the designers and developers to start building.

🙌 What stood out to me...

...a lot!!

This is a short chapter, but probably one of the most impactful for me personally.

Coming from an agency background, every minute spent on a project needs to be tracked against a pre-defined budget.

I'd often feel guilty for spending time getting oriented at the beginning instead of jumping straight to InDesign or Figma.

In this chapter, it says that the first few days are expected for work to not looks like "work". Managers understand that the team needs to take some time to try solutions out, before jumping into "real production".

Specific tasks are also not given to the team. Rather they have the freedom and responsibility to tackle the project as they see fit. (More on that later.)

Chapter 11: Get One Piece Done

To help make meaningful progress, it is advised to work on one full slice of the project at a time.

What this doesn't look like...

Working on sub-features A, B & C in order and starting with the design, then development, then QA, and then presenting.
Working on just sub-feature A, but still starting with the design, then development, then QA, and then presenting.

Instead, the designer should rough out the core HTML elements needed and the developer can connect them to the database.

If they see the very rough version works, they can show it to their manager. If it looks good then they can really flesh out the design and code.

🙌 What stood out to me...

...these pieces should be small and related to the core feature. That way a simplified, but technically working iteration can be done and validated in a few days.

Because it is also a "core" aspect of the project, future pieces will be informed by it and time therefore saved.

Chapter 12: Map the Scopes

The pieces of the project are actually given a more official name called scopes.

A scope is a collection of tasks that allows a meaningful part of the feature to be fully completed. The tasks inside it are not role-specific (design vs development), but rather structure-specific.

For example, a project to add an auto-pay feature might include a scope to build just the confirmation email on payment. The tasks within it would include everything needed to finish it: designing the layout, writing microcopy, coding the HTML, and connecting it to the mailing server.

🙌 What stood out to me...

...was that scopes grow naturally over the course of the cycle.

I found this to be true in many projects in the past. Despite my best efforts to map out tasks ahead of time — new ones pop up as production progressed.

I love how Shape Up is so open to this. It gives more freedom to the designer & developer to create their own tasks as needed.

Chapter 13: Show progress

Speaking of constantly adding tasks to scopes... How does a manager tell when something is actually close to being done?

The concept of the hill is used to visualize where a given project's progress is really at.

Imagine a literal hill with an up-slope on the left and a down-slope on the right.

The left side of the hill represents the "unknowns". Any scope that requires research on how to execute it will be more to the left. The further up the hill, the clearer the solution is to the team.

The right side represents execution. The team knows what to do to make a scope happen, but just needs to actually design/code it.

🙌 What stood out to me...

There is a wonderful example given in this chapter of how the hill relates to cooking. Highly recommend reviewing it.

This chapter also illustrates why the hill enables managers to see possible scopes that "stuck". If it is lingering on the left side for a week or two, then it becomes apparent that some support around it might be helpful.

Chapter 14: Deciding When to Stop

So this is an age-old question...when should we stop working on a feature? We know already that the project is done when the cycle ends. But is it really worth stopping? Is the result good enough?

🙌 What stood out to me...

...of the many great points discussed the baseline made a lot of sense to me.

Don't compare what the feature could be if we threw more time and talent at it. That would be the ideal product.

Instead compare it to the current product that the customers are using. That is the baseline.

If shipped in its current state, would the feature improve their experience in a real way? (Not perfect, but better than before.)

If the answer is yes, then that is a win.

This mindset helps the team cut out extra pieces and just focus on the 1-2 core parts that will directly help the customer. It is better to execute the core items really well than 5 things "ok" because of not enough time.

More additions can always be shaped and added overtime in future cycles.

Chapter 15: Move On

That awesome (maybe slightly terrifying) moment comes and the feature is shipped! Now what?

🙌 What stood out to me...

...is how Shape Up sticks to its principles even after launch.

There will probably be a lot of post-launch feedback, both negative and positive. But it is important to remember that all new features have to be shaped first.

Just because it sounds like a good or even urgent addition, it needs to be weighed against the pros and cons of everything else.

Staying intentional will keep the team on track, morale high, and features of high quality over time.

Thanks for reading!

I hope this summary of key takeaways has piqued your interest in reading the full book. It is really well written and has great examples and illustrations to help highlight their points. Plus it is free and online. :)

"Shape Up: Stop Running in Circles and Ship Work that Matters".

But, let me know your thoughts! Have you used Shape Up before? If you did, how was your experience? What other workflow methodologies have you used and found successful?

Until next, happy coding! 🤓

Thumbnail designed with Adobe Photoshop

DEV Community: Gedalya Krycer

Design & Front-End Takeaways From "An Event Apart" Conference

Talks in this post:

📢 Declarative Design

Main Takeaway

Imperative vs Declarative Programming

Different Mindsets

Principle of Least Power

Taking A Layered Approach

Other Takeaways

Resources

📢 Eyes on the Prize: Lessons in User-Centered Design

Main Takeaway

A Testimony Of Working Under Pressure

Some Of The Lessons She Shared

Resources

📢 When New CSS Features Collide: Possibility and Complexity at the Intersections

Main Takeaway

So Many New Features!

Container Queries

Resources

📢 Cascading Layers of !mportance

Main Takeaway

CSS Cascading Layers

Resources

📢 SEO teams—The UX Ally You’ve Been Missing All Your Life!

Main Takeaway

Speak The language Of The Customer

Using Google Search to Understand Intent Tips

📢 Supercharge Your Development with GitHub Codespaces

Main Takeaway

What Is It?

Some Benefits Discussed

Resources

📢 Animation in Today's Responsive Design

Main Takeaway

Individual Transform Properties

prefers-reduced-motion

Resources

📢 How to Win at ARIA and Influence Web Accessibility

Main Takeaway

Tips & Rules of ARIA

Resources

📢 Better Onboarding Through Guided Interaction

Main Takeaway

The Fear of Good Onboarding

Treat Onboarding As A Journey Over Time

Onboarding Opportunities Along The Journey

Where Does Onbording Take Place?

Caution About Using Overlays

Resources

📢 CSS :has() Unlimited Power

Main Takeaway

Other Takeaways

Resources

Facing Imposter Syndrome: Am I Worthy?

Introduction

Facing Imposter Syndrome: Am I Controlling?

Gedalya Krycer ・ Aug 22 ・ 7 min read

Sections

"The Superhero"

Character Traits

Personal Reflection

Question 1: Do you work later than others, just to be sure that your required 8 hours was really good enough?

Question 2: Do you struggle to have downtime because you feel like you should always be doing, and working more?

Question 3: Do you feel undeserving of certain aspects of your life even though you worked hard to learn and earn them?

Finding Validation From Within

Awareness

Understand Your Need For Approval

Work on self-worth

Say Nice Things To Yourself Out Loud

Accept Your Limits

Fact Check Your Beliefs

Stop Comparing Yourself

Summary

Facing Imposter Syndrome: Am I Controlling?

Introduction

Sections

The Cast Of Imposter Syndrome

"The Perfectionist"

`prefers-reduced-motion`

📢 CSS `:has()` Unlimited Power

Step 1: Create base `<PrimaryButton />` component

Step 4: Use `<PrimaryButton />` anywhere in the project