<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lisa Cee</title>
    <description>The latest articles on DEV Community by Lisa Cee (@lisacee).</description>
    <link>https://dev.to/lisacee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F142912%2F0f7fc9ee-4f9b-4b14-80fa-28453ac02e27.jpg</url>
      <title>DEV Community: Lisa Cee</title>
      <link>https://dev.to/lisacee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lisacee"/>
    <language>en</language>
    <item>
      <title>Flexible Border Element</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Sun, 01 Mar 2026 21:12:43 +0000</pubDate>
      <link>https://dev.to/lisacee/flexible-border-element-m6e</link>
      <guid>https://dev.to/lisacee/flexible-border-element-m6e</guid>
      <description>&lt;p&gt;I recently transitioned from full stack to front end engineer. Front end is what inspired me to become an engineer and returning to a front end focus has reinvigorated my desire to play with code in my free time.  I picked a &lt;a href="https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H" rel="noopener noreferrer"&gt;project&lt;/a&gt; on Frontend Mentor and have been building it out on the weekends. &lt;/p&gt;

&lt;p&gt;Here is what I am building:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff0clhn1s3a84n9kixac8.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff0clhn1s3a84n9kixac8.webp" alt="A social media dashboard with each card representing the data for a specific service." width="700" height="513"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It was going really well; I was building out components, implementing theming and familiarizing myself with Tailwind when I got stumped by the card border.&lt;/p&gt;
&lt;h2&gt;
  
  
  Border Issues
&lt;/h2&gt;

&lt;p&gt;I already knew that it could be challenging working linear-gradient borders, so I decided to wait on the Instagram card and focus on the solid color borders. It was easy to add a top border to a card with a border-radius, but it didn’t look like the design. The border had a curve on the corner that I didn’t like. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwcga3mxfpew711mhvw65.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwcga3mxfpew711mhvw65.png" alt="A social media card with rounded corners. The red border on the top is rounded and curves slightly in at the corners." width="421" height="236"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div className="rounded-lg border-t-4 border-red-700 flex flex-col items-center gap-6 bg-card py-6 w-[300px]"
    &amp;gt;
    {/* Card content */}
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Rather than stalling my progress by figuring this out, I opted to move on to the Instagram border which ended up providing a solution for both the curved border corners and the gradient border.&lt;/p&gt;

&lt;h2&gt;
  
  
  Gradient Border
&lt;/h2&gt;

&lt;p&gt;To create the gradient border for the Instagram card, I started with some conditionally logic. If the component was the Instagram card, then conditionally render either a border or a border-image. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkio957oeptwclu1rd4e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkio957oeptwclu1rd4e.png" alt="An Instagram social media card. It has rounded corners on the bottom. There is a multi-color border on top that does not have rounded corners." width="397" height="228"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div 
     className={`rounded-lg border-t-4 ${!isInstagram ? 'border-red-700' : ''} flex flex-col items-center gap-6 bg-card py-6 w-[300px] md:p-6 md:w-full cursor-pointer`}
     style={
        isInstagram
          ? {
          borderRadius: '8px',
          borderImage:
                'linear-gradient(to right, hsl(37, 97%, 70%), hsl(5, 77%, 71%), hsl(329, 70%, 58%)) 1',
            }
          : undefined
      }
&amp;gt;
       {/* Card content */}
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This worked to a point, but I didn't love it. First, I didn’t like the complexity of adding a border for some cards and a border-image to others. I also didn’t like using the inline style tag. Finally, and most importantly, a border-image does not work with border-radius. That was a deal breaker.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Aha! Moment
&lt;/h2&gt;

&lt;p&gt;As I searched for a solution, I learned that there are a lot of ways to solve for this issue. The cleanest way that I found was to create a css class for the border with a relative position. Then I created a pseudo element using ::before to create an absolutely positioned border with a border radius.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div className={`rounded-lg  ${!isInstagram ? 'service-border' : 'border-red-700 border-t-4' } flex flex-col items-center gap-6 bg-card py-6 w-[300px] md:p-6 md:w-full cursor-pointer`}
&amp;gt;
     {/* Card content */}
&amp;lt;/div&amp;gt;

{/* CSS */}
.service-border {
  position: relative;
}

.service-border:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 0.5rem 0.5rem 0 0;
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(5, 77%, 71%), hsl(329, 70%, 58%));
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is where I had the aha moment and discovered that I could solve both of my issues using a pseudo-element. I could have a gradient border with a radius and solve the curved corner issue with the solid-color borders.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc73jafub09roaajsg1da.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc73jafub09roaajsg1da.png" alt="Two social media cards side by side. The one on the left has a solid red border on the top and it curves in slightly at the corners. The one on the right has a gradient border at the top and only curves at the corner, leaving a straight line where it meets the card." width="800" height="234"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since I was already going to be using some vanilla CSS, I opted to add a dynamic border class based on the service name.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div className={`rounded-b-lg service-border border-${serviceName} flex flex-col items-center gap-6 bg-card py-6 w-[300px] md:p-6 md:w-full cursor-pointer`}
&amp;gt;
     {/* Card content */}
&amp;lt;/div&amp;gt;

{/* CSS */}
.service-border {
  position: relative;
}

.service-border:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 0.5rem 0.5rem 0 0;
}

.border-facebook::before {
  background: hsl(var(--facebook-border));
}

.border-twitter::before {
  background: hsl(var(--twitter-border));
}

.border-youtube::before {
  background: hsl(var(--youtube-border))
}

.border-instagram::before {
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(5, 77%, 71%), hsl(329, 70%, 58%));
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffosfdzbfduxi3i82sd97.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffosfdzbfduxi3i82sd97.png" alt="4 social media cards with various color borders. The all have nicely rounded corners and a flat-based border on the top." width="800" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is still a work in progress, but I was pleasantly surprised by discovering this solution that worked well for both of my border-related challenges. You can check out the WIP project on my &lt;a href="https://github.com/LisaCee/media-dashboard" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;. I'd love to hear your thoughts and your go-to solutions on how to handle CSS border gotchas.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;You can create a more flexible border by creating an absolutely-positioned pseudo-element. It provides a nice, flat border, can handle both solid colors and gradients and can accommodate a border-radius.&lt;/p&gt;

</description>
      <category>css</category>
      <category>frontend</category>
      <category>tailwindcss</category>
      <category>learning</category>
    </item>
    <item>
      <title>I'm not a designer, but ...</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Sun, 09 Jun 2024 21:46:55 +0000</pubDate>
      <link>https://dev.to/lisacee/im-not-a-designer-but--lke</link>
      <guid>https://dev.to/lisacee/im-not-a-designer-but--lke</guid>
      <description>&lt;p&gt;I am a developer, not a designer, but I have strong opinions on UI. I helped thousands of new computer users while working at a public library.  I got a very informal introduction to the world of UI and UX, accessibility and expected behaviors. It was these interactions that led me to becoming a software engineer. I work with designers who have their own experiences and educations on UI. Sometimes I don’t love the designs, and while I often make their designs into a reality, I thought it would be fun to explore how I would have designed things instead.&lt;/p&gt;

&lt;p&gt;Note: All of the UI images here were created with &lt;a href="https://penpot.app/"&gt;Penpot&lt;/a&gt;. The these examples are simplified, and often quite clunky and far from pixel perfect, but hopefully they get the gist across.&lt;/p&gt;




&lt;h2&gt;
  
  
  The modal
&lt;/h2&gt;

&lt;p&gt;A designer I work with designs a lot of modals. I know people have a lot of opinions about modals, but that is a discussion for another post.&lt;/p&gt;

&lt;p&gt;I recently worked on a new timeline feature for a SASS application. A user may have multiple sites that they manage and the timeline will show the user events in chronological order. Each timeline event has a "view more" button that opens a modal.&lt;/p&gt;

&lt;p&gt;This is the original design. It features a heading with the event and a list of each site that attempted the event. There are both indeterminate and static progress bars, status badges (they're not buttons), a list of errors and a vertical scroll when there is more than a few sites.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fws2nnkmnybrh1xfelnlo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fws2nnkmnybrh1xfelnlo.png" alt="A long modal with a list of sites and the status of their timeline event" width="598" height="691"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I immediately had thoughts on this modal. This is a massive modal with a lot of elements to interpret. The combination of movement, colors and the vertical scroll were visually overwhelming to me. A modal seemed like too small of a surface to display a potentially lengthy list of sites.&lt;/p&gt;

&lt;h2&gt;
  
  
  My modal idea
&lt;/h2&gt;

&lt;p&gt;Rather than providing the user with ALL of the details, I would opt to present them an overview and then link them to a page for more detail.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvy8y83zoootw0iyd923f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvy8y83zoootw0iyd923f.png" alt="A small modal with an overview and a button to get more detail" width="653" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I would expect the "view site details" button to take me to a full page. In fact, the modal could be eliminated all together and the original user interaction could take them to this page directly. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2gnuykbx7f5rdi1fwbvk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2gnuykbx7f5rdi1fwbvk.png" alt="A detailed list of sites" width="800" height="539"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are a few things that I changed between the original modal list and this new page. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I am only displaying a progress bar when the event is occurring. It is redundant to have both a complete progress bar and a status badge.&lt;/li&gt;
&lt;li&gt;Rather than display all of the errors, I moved them behind a toggle button. When the button is clicked, the error details expand.&lt;/li&gt;
&lt;li&gt;I added a line between each site to easily distinguish between sites.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some other ideas I have for this page include adding a button to view the site (in case an update broke something) or to go to the main admin screen. I couldn't decide a good place for those buttons, so I left them out of the example.&lt;/p&gt;

&lt;h2&gt;
  
  
  Thoughts?
&lt;/h2&gt;

&lt;p&gt;So, what do y'all think? Fellow devs, do you ever feel like a professional design isn't quite hitting the spot? Designers, do you wish the devs would stay in their lane?&lt;/p&gt;

&lt;p&gt;Until recently, I created UI components and screens that matched the design without question. Lately, though, the handoff between design and dev has been much more of a discussion. This has worked well for both design and dev. We can see different perspectives from our own and discover challenges we unknowingly create for each other. We're all working towards the same goal so it makes sense to collaborate a little more along the way.&lt;/p&gt;

</description>
      <category>ui</category>
      <category>modal</category>
    </item>
    <item>
      <title>Tool to create quick mockup</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Sun, 09 Jun 2024 19:07:42 +0000</pubDate>
      <link>https://dev.to/lisacee/tool-to-create-quick-mockup-1eb6</link>
      <guid>https://dev.to/lisacee/tool-to-create-quick-mockup-1eb6</guid>
      <description>&lt;p&gt;I am a developer, not a designer, but I want to write about UI and I want to include example UI images. What is a tool that y'all use to quickly create a sharable or embeddable image to accompany your writing here on dev.to?&lt;/p&gt;

&lt;p&gt;I don't want a tool so in-depth that I have to spend a lot of time to figure it out. It would be lovely if the tool had some generic components, buttons and placeholder, but I am also open to a Publisher-like tool. I am on a Mac and would prefer a free-ish tool.&lt;/p&gt;

&lt;p&gt;For example, a designer at work made a very complex modal design that had multiple animation, interactions and a vertical scroll. I would like to write about the things I don't like about the design and how I would have designed it differently and why. Since it's based on proprietary details, I want to find a tool to recreate an image of it in a more generic way.&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>How did you find your niche in tech?</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Mon, 12 Dec 2022 20:18:29 +0000</pubDate>
      <link>https://dev.to/lisacee/how-did-you-find-your-niche-in-tech-5270</link>
      <guid>https://dev.to/lisacee/how-did-you-find-your-niche-in-tech-5270</guid>
      <description>&lt;p&gt;There are a lot of specialties working in technology. When I was in my coding bootcamp we learned a lot of things really fast. I figured that once I got a job, I would be able to focus on fewer tools and get better with them. That hasn't happened yet and I'm not sure how to go about finding where I fit and can grow in tech.&lt;/p&gt;

</description>
      <category>welcome</category>
      <category>career</category>
      <category>learning</category>
      <category>testing</category>
    </item>
    <item>
      <title>Passing a value to a nested component using the React Context API</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Wed, 13 Jul 2022 19:14:49 +0000</pubDate>
      <link>https://dev.to/lisacee/passing-a-value-to-a-nested-component-using-the-react-context-api-3n56</link>
      <guid>https://dev.to/lisacee/passing-a-value-to-a-nested-component-using-the-react-context-api-3n56</guid>
      <description>&lt;p&gt;When I started learning React in 2018, hooks were not yet a thing. This was very taxing since I was struggling to get a component to render and having to pass props from parent to child added another level of complexity. &lt;/p&gt;

&lt;p&gt;Fast-forward to 2022 when I start playing in React again and I learn about the &lt;a href="https://reactjs.org/docs/context.html" rel="noopener noreferrer"&gt;React Context API&lt;/a&gt; during an interview.&lt;/p&gt;

&lt;blockquote&gt;“Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.”&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.gifcen.com%2Fwp-content%2Fuploads%2F2022%2F06%2Fmind-blown-gif-7.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.gifcen.com%2Fwp-content%2Fuploads%2F2022%2F06%2Fmind-blown-gif-7.gif" alt="chris pratt extending his hands from his temples outward with yellow line animation symbolizing his mind being blown"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;They make it sound so simple, but it took me a while to wrap my mind around it and use it in a meaningful way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;My company has a library of reusable React UI components, such as &lt;code&gt;Text&lt;/code&gt; and &lt;code&gt;Button&lt;/code&gt; that make it easy to test those components in isolation and later plug them into a product UI. &lt;br&gt;
  &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzkc0zo3735cijlzj8b8r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzkc0zo3735cijlzj8b8r.png" alt="A simplified version of what I'm making"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I am tasked with helping create a new password-less login flow using webauthn. The design has multiple cards, each with a header detailing a user's progress, a heading, and a link. Since this is a common design model it was decided to create a reusable component in our UI library so that it could be adapted for reuse in other projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Challenge
&lt;/h2&gt;

&lt;p&gt;Since there is a component library, I will combine and modify existing components to create this new component. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F34tm9iop0uajpg68w8tu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F34tm9iop0uajpg68w8tu.png" alt="The file hierarchy for this project"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I will use the existing &lt;code&gt;Surface&lt;/code&gt; (background color) and &lt;code&gt;Text&lt;/code&gt; components. I want to pair complementary text colors based on the selected background color. Since the background color will dictate the text color, I start with &lt;code&gt;Surface&lt;/code&gt; and pass the background color to &lt;code&gt;Text&lt;/code&gt; and finally into &lt;code&gt;Heading&lt;/code&gt;. To do this I use React’s Context API to pass the data through the component tree, rather than having to pass props down manually at each level.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I did it
&lt;/h2&gt;

&lt;p&gt;First I create a theme for my &lt;code&gt;Surface&lt;/code&gt; component. The component library already had an existing theme, so I pull from those colors for this component-specific theme. Here I map through the different background colors and pair them with complementary text colors. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;

&lt;span class="c1"&gt;// Here I bring in the existing theme values to the surface theme&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../../types&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Since this is TypeScript, I define the shape of my theme&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;SurfaceTheme&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="nl"&gt;variant&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// This is the theme with the color pairings&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;surfaceDefaultTheme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;SurfaceTheme&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="na"&gt;variant&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PRIMARY&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NORMAL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;SECONDARY&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;DARK&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;TERTIARY&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ACCENT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Next, I import &lt;code&gt;createContext&lt;/code&gt;, a function of the React Context API from WordPress. Much like above, I create an interface for the shape of the context object and assign a variable to hold the context value.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@wordpress/element&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// The shape of the context object&lt;/span&gt;
&lt;span class="nx"&gt;interfaceSurfaceContext&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="nl"&gt;textVariant&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Using createContext, I passed the acceptable value types and gave it a &lt;/span&gt;
&lt;span class="c1"&gt;// default value of undefined&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SurfaceContext&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;createContext&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;SurfaceContext&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="kc"&gt;undefined&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Inside of my Surface function, I pull in the surface theme data (by way of the theme), assign a variable &lt;code&gt;variant&lt;/code&gt; to props and give it a default value to use if none exists. Then I assign &lt;code&gt;contextValue&lt;/code&gt; to hold the text color, and I pass that as a prop to my context provider. This is the top level of my component tree.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Surface&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;SurfaceProps&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// Get surface theme&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;components&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;surface&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;useTheme&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Get the surface variant | assign to Primary&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;variant&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;SurfaceVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PRIMARY&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Create an object with the text color&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;contextValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;textVariant&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;surface&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;variant&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;variant&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

 &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
&lt;span class="c1"&gt;// Pass the text color to the React Context Provider&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;SurfaceContext&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Provider&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;contextValue&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
   &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;StyledSurface&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/SurfaceContext.Provider&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Moving into the first child component, &lt;code&gt;Text&lt;/code&gt;, I import the &lt;code&gt;useContext&lt;/code&gt; React Context function and my &lt;code&gt;SurfaceContext&lt;/code&gt; variable from &lt;code&gt;Surface&lt;/code&gt;. Inside of my Text function, I assign a variable to hold these values.  Then as a prop to the text component, I assign a series of values to the variant parameter.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@wordpress/element&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;SurfaceContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../surface&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
&lt;span class="c1"&gt;// params&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="nx"&gt;variant&lt;/span&gt;
&lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="nx"&gt;TextProps&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;surfaceContext&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;SurfaceContext&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt;
       &lt;span class="c1"&gt;// If the user explicitly passes a text color, &lt;/span&gt;
       &lt;span class="c1"&gt;// that should be honored.&lt;/span&gt;
       &lt;span class="c1"&gt;// Otherwise use the text color from the surface &lt;/span&gt;
       &lt;span class="c1"&gt;// theme if defined&lt;/span&gt;
       &lt;span class="c1"&gt;// Or, default to normal text color&lt;/span&gt;
    &lt;span class="nx"&gt;variant&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;variant&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;surfaceContext&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;textVariant&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;TextVariant&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NORMAL&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Finally, we reach the &lt;code&gt;Header&lt;/code&gt; component, the whole reason for this endeavor. Since this component is made up of the &lt;code&gt;Surface&lt;/code&gt; and &lt;code&gt;Text&lt;/code&gt; components, there is nothing left to do here. All of the background color/text color information is received by its respective components and rendered correctly in this component. &lt;/p&gt;

&lt;p&gt;It's a little anti-climactic, but that's the magic of the React Context API: it just works. &lt;/p&gt;

&lt;p&gt;Here is the finished component in action:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fihre5m5c8e3cthpdbp6l.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fihre5m5c8e3cthpdbp6l.gif" alt="A walk through of the described component, showing different surface variants updating the text color"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I learn best by doing, so it took a real project to get me to fully understand the process. I describe it here mostly to solidify the concepts for myself, but maybe it will help you connect some of the pieces that you struggle with while using the Context API.&lt;/p&gt;

&lt;p&gt;If you'd like some further reading on the subject, checkout these resources: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://reactjs.org/docs/context.html" rel="noopener noreferrer"&gt;React Context&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://reactjs.org/docs/hooks-reference.html" rel="noopener noreferrer"&gt;Hooks API Reference&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/" rel="noopener noreferrer"&gt;WordPress Element Package&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>contextapi</category>
      <category>storybook</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>Still Coding in 2022</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Tue, 08 Mar 2022 00:34:10 +0000</pubDate>
      <link>https://dev.to/lisacee/nevertheless-lisa-continued-to-code-into-2022-4oc</link>
      <guid>https://dev.to/lisacee/nevertheless-lisa-continued-to-code-into-2022-4oc</guid>
      <description>&lt;p&gt;I've had a tough go of working as a software developer, but I'm still here. After a year of searching, I got my first job in March 2020. In April 2020 I was diagnosed with breast cancer and was in treatment from June 2020 - May 2021. Then in September, 2021 I was laid off from my job. (I have a new one).&lt;/p&gt;

&lt;p&gt;There have been a lot of challenges in this very short time, but I have worked too hard to give up on my passion. I can't wait to see what I do in the future, now that I am healthy and stronger than ever.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbjo476uziwsnus2go1ww.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbjo476uziwsnus2go1ww.jpg" alt="A smiling white woman with glasses and short, curly purple hair" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>wecoded</category>
    </item>
    <item>
      <title>First Year As a Dev</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Fri, 19 Mar 2021 00:25:44 +0000</pubDate>
      <link>https://dev.to/lisacee/first-year-as-a-dev-8pb</link>
      <guid>https://dev.to/lisacee/first-year-as-a-dev-8pb</guid>
      <description>&lt;p&gt;It's coming up on my first anniversary of being employed as a developer. It's been a year of a lot of really big changes, but it's tough to winnow down the focus of the year to being just a developer.  I can, however, isolate my first month as a developer and that feels both like a really long time ago and really recent. &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyr76p24vl7zdxdgdjsyn.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyr76p24vl7zdxdgdjsyn.jpg" alt="A picture of the author, a white woman with short brown hair and glasses standing in front of greenery" width="648" height="608"&gt;&lt;/a&gt;&lt;/p&gt;
Hi



&lt;p&gt;If you don't know me, you might wonder why I'm reflecting on just my first month at work and not the other eleven months I've been working. It's because in April 2020 I was diagnosed with breast cancer and everything changed. I've already &lt;a href="https://lisaceedev.wordpress.com/tag/cancer/"&gt;written about having cancer&lt;/a&gt; and I really want this to just be about being a developer.  Cancer adds another thread to unravel in an already crazy time, so it was only my first month where I could isolate being a developer from the rest. &lt;/p&gt;

&lt;p&gt;It was mid-March 2020.  The very beginning of the pandemic.  It was a weird world and I was changing careers.  I had no idea what to expect. I went from working with the public at a library to working from home. My working from home wasn't pandemic-related. It was just a coincidence that my new job happened to be remote. &lt;/p&gt;

&lt;h2&gt;
  
  
  Work
&lt;/h2&gt;

&lt;p&gt;My entire company is remote. It’s really cool, actually.  It’s a distributed team. There are people in different countries and because of time zones everyone works at different times.&lt;/p&gt;

&lt;p&gt;This kind of asynchronous work was in stark contrast to my library schedule.   I worked with the public and I had to be there when they were there. There was, understandably, a lot less fluidity in my schedule. Having the freedom to choose when I work was a little overwhelming. It might feel a little more natural over time, but it still feels really weird after my first year.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibo2to0de6p49h9lgejl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibo2to0de6p49h9lgejl.jpg" alt="A brown wooden desk with black legs and a white chair.  On the table is a lamp, a laptop, and potted plants" width="800" height="533"&gt;&lt;/a&gt;Photo by Nathan Riley on Unsplash&lt;/p&gt;

&lt;p&gt;There are a lot of really lovely things about this kind of workflow. Firstly, I am part of a global team and that is really amazing. Since we work asynchronously it doesn’t matter if I’m online at the same time as my colleagues. We find times where we overlap to speak face to face, via Zoom, but most of the time I’m on my own. The downside to this, however, is that sometimes I have to wait to get a question answered. Most of the time there’s someone online that can help me out, but it also forces me be more patient and sometimes by writing out my question and waiting for an answer I can figure it out on my own.&lt;/p&gt;

&lt;h2&gt;
  
  
  Learning
&lt;/h2&gt;

&lt;p&gt;My first month of being a developer, I felt like I didn’t know anything. I went from being a library professional of 14 years years to being a complete n00b as a developer. I didn’t know the programming language I was writing or the CMS. I didn’t even know what a CMS was.  (It’s a Content Manager System. WordPress is the one I work with.) I went from mentor to mentee and it was very humbling.&lt;/p&gt;

&lt;p&gt;I was paired with another developer, a very patient wizard of a programmer. When I started I had no idea the file structure of a WordPress project, let alone a WordPress plugin with hundreds of files. I couldn’t even find the file to work with. How was I supposed to fix an issue in the code?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faus0q5f2ly4mwdyk6bk5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faus0q5f2ly4mwdyk6bk5.jpg" alt="A computer screen with code, partially viewed through the lenses of a pair of black-rimmed glasses" width="800" height="600"&gt;&lt;/a&gt;Photo by Kevin Ku on Unsplash&lt;/p&gt;

&lt;p&gt;My mentor and I figured out my learning style as we went. Since there is never just one right solution in code, I didn’t want to just be given the answer. I prefer a nudge in the right direction, a link to a doc or a line number. I didn’t want to be sent a block of code to copy and paste or retype to gain the muscle memory. I wanted to figure it out, I just needed a little help getting there.&lt;/p&gt;

&lt;p&gt;This method has served me well. Just today I was given an unintentional nudge on an issue. The other developer was just leaving a note about what she thought might be the cause of the issue. She didn’t know that I had been struggling with a similar but different issue. I had spent hours trying and failing to solve it. With the one little nudge, I was able to close out two issues. A year into my career I still feel like an idiot much of the time, but I know a lot more than I did when I started.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lessons
&lt;/h2&gt;

&lt;p&gt;I thought I would spend a lot more time writing code than I actually have. While it may have been mentioned while I was in school, that certainly wasn’t my experience. Starting out, I thought that to prove my worth to this company I would have to write a lot of code. I have written code, but I have read far more. I have learned a lot more through reviewing other peoples code than I have from writing my own.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qyzeb4vc2xvfjxtzte0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qyzeb4vc2xvfjxtzte0.jpg" alt="A classroom table with books, letter building blocks, and apple and colored pencils" width="800" height="565"&gt;&lt;/a&gt;Photo by Element5 Digital on Unsplash&lt;/p&gt;

&lt;p&gt;I also thought that I would work faster as I learned more, but actually I am getting slower and that’s a good thing. Now that I am feeling a bit more comfortable, I have learned to take my time. Rather than just jump in and throw a band-aid over a problem, I try to look a little deeper. I take time to at least scan the file I am working on, reading the function descriptions if not all of their contents. I search the code and make sure that I’ve found every time that the thing I’m working on is used and try to make sure that I don’t break that as I fix this other thing. Overall, this probably makes things go faster. My coworkers don’t have to spend as much time pointing out little things that I missed and I don’t have to keep going back to fix things.&lt;/p&gt;

&lt;p&gt;This last thing I knew already, but I have to reinforce it every so often: take breaks. I use a &lt;a href="https://github.com/schmich/marinara"&gt;Pomodoro timer&lt;/a&gt; to make myself remember to take breaks, but I am very guilty of putting that off for just “one more thing.” I thought that I would be working at my desk writing code from 9-5. That is not how quality code is written. Everyone knows that taking breaks is a good thing, that it lets you clear your head and come at a problem from a different perspective, but it’s hard to do in practice. It’s something that I think a lot of developers struggle with, but using the reset of a break really does help me get more things done.&lt;/p&gt;

&lt;p&gt;I plan to write more about my experiences with WordPress, PHP vs JavaScript and remote work another time but today I want to celebrate how far I’ve come over this year and look forward to my future in development.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>php</category>
      <category>remote</category>
      <category>developer</category>
    </item>
    <item>
      <title>Things I Learned By Not Getting Hired for a Year</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Wed, 18 Mar 2020 00:03:26 +0000</pubDate>
      <link>https://dev.to/lisacee/things-i-learned-by-not-getting-hired-for-a-year-1ii</link>
      <guid>https://dev.to/lisacee/things-i-learned-by-not-getting-hired-for-a-year-1ii</guid>
      <description>&lt;p&gt;I graduated from Lambda School in February 2019, just days before my 40th birthday.  I expected to have a new career within a few months, one with a fancy office space and snacks.  One year, 143 applications and 9 interviews later I was still searching for my first developer job.  &lt;/p&gt;

&lt;p&gt;Just before my 41st birthday, I started reflecting on the year and the things that I did accomplish, mostly just through job searching.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7nok2b4w4mgeebexlsv6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7nok2b4w4mgeebexlsv6.png" alt="I can't get a job without experience" width="500" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Things I Accomplished This Year
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;5 Meetups &lt;/li&gt;
&lt;li&gt;2 Industry Mentors&lt;/li&gt;
&lt;li&gt;1 Linux Computer Built&lt;/li&gt;
&lt;li&gt;3 Informational Interviews &lt;/li&gt;
&lt;li&gt;Many Drives to Seattle&lt;/li&gt;
&lt;li&gt;1 Job Fair&lt;/li&gt;
&lt;li&gt;3 Career Coaches&lt;/li&gt;
&lt;li&gt;2 Staff Advisers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I know that some of these things might seem like no big deal, but as someone with &lt;a href="https://www.nimh.nih.gov/health/publications/generalized-anxiety-disorder-gad/index.shtml"&gt;Generalized Anxiety Disorder&lt;/a&gt;, each of the things listed above was way out of my comfort zone.  Small tasks like calling people on the phone for informational interviews or driving to an unknown area can be really scary. I did them only to further my job search, but each time I did, I found that my comfort zone got a little larger.&lt;/p&gt;

&lt;p&gt;I'm going to put these activities into general categories, highlighting the skills I gained from these experiences.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Confidence&lt;/li&gt;
&lt;li&gt;Assertiveness&lt;/li&gt;
&lt;li&gt;Challenging Myself&lt;/li&gt;
&lt;li&gt;Goal Setting&lt;/li&gt;
&lt;li&gt;Persistence&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Confidence &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Impostor Syndrome is a very real thing.  I didn't start networking until after I finished school and while I was close with my classmates, I didn't know any developers in my geographic area.&lt;/p&gt;

&lt;p&gt;I wrote here about my &lt;a href="https://dev.to/lisacee/lambda-strong-4mkg"&gt;first meetup experience here&lt;/a&gt;.  At that meetup I met with other Lambda School students, people that I knew were in my community, but I still worried.  It turned out that there was nothing to worry about, as usual, but it was still a big step for me to put myself out there.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu5vr2mdsru8ul9ehswia.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu5vr2mdsru8ul9ehswia.jpg" alt="Seattle Skyline" width="800" height="212"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then I went to a &lt;a href="http://seattlejs.com/"&gt;SeattleJS&lt;/a&gt; meetup.  I was worried about this one on two fronts: meeting with strangers in a new environment and driving to Seattle (about 40 minutes away).  Over the years I've gotten much better about freeway driving, but Seattle is notorious for its traffic and driving in the city is still intimidating.  &lt;/p&gt;

&lt;p&gt;But the meetup itself was not at all intimidating.  As soon as I walked in the door another developer started chatting me up.  After some pizza, beer and some good discussions, I felt more at ease.  When I got back to my car I had new connections on LinkedIn and the whole endeavor was well worth the effort.  I have since gone to more of their meetups, seen some really cool office spaces, made more connections and even met for coffee with one presenter.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F3ghbsibznls5ovwcuk8l.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F3ghbsibznls5ovwcuk8l.jpg" alt="A cup of coffee and a name tag" width="577" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These experiences also made me feel more confident with my place in the developer community.  Where once I had felt like an impostor, now I felt more like I belonged with these people.  That led me to connect with people on LinkedIn who had jobs that sounded interesting or I had shared interests with and ask if they had time to chat with me.  Only a few people took me up on it, but it was reassuring to be able to reach out to strangers in the community and have some of them take time out of their days to chat with a newbie for a few minutes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Assertiveness &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;As part of the career services at my school, I was paired with an industry mentor who lived in the greater Seattle area.  This program was designed to help with networking and introducing new developers to their local community.  Unfortunately, my first mentor, while nice, was new to the area and didn't know many people outside of Microsoft.  We video chatted a few times and he offered some suggestions, but after he missed a few of our meetings I realized that we were not a great fit.&lt;/p&gt;

&lt;p&gt;Instead of suffering in silence and missing out on this great way to connect with other developers I reached out to my adviser and asked if I could get another mentor. I figured at worst, they would say no and I would be no worse off than before I asked.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fvoy6dmau881yirfn19p3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fvoy6dmau881yirfn19p3.jpg" alt="Sign in a modern font that says " width="498" height="331"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Luckily, there was a new mentor in the program, Rosalind, who also happened to have been in my cohort.  She already had a job and was really enthusiastic about helping me find a job.  Working with Rosalind was really inspiring and she suggested job searching techniques that I hadn't thought of.  Because of her, I went to a job fair and applied to jobs that target women developers.  She reminded me to highlight the things that make me different and use those traits to prove to employers what I could bring to their company.  &lt;/p&gt;

&lt;p&gt;By being assertive and seeking out a new mentor I gained a valuable resource, an ally, and a fresh perspective in my job search.&lt;/p&gt;

&lt;h3&gt;
  
  
  Challenging Myself &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This category is a little different since most everything I have written about has been a challenge, but this challenge was a little different - my computer was dying and so I built a new one from scratch.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjrx13b6hftoj493hw0a3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjrx13b6hftoj493hw0a3.jpg" alt="Green motherboard" width="640" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When I was in high school, I was terrified of computers.  They always ate my assignments and got mad at me.  (It was the 90s.)  So, fast forward to more recently when I started researching what new computer to buy.  It never even dawned on me to build my own, but a friend suggested it and I accepted the challenge.  I even one-upped it by choosing to install Linux over Windows, even though I had no experience using it.  &lt;/p&gt;

&lt;p&gt;All of the components I bought worked together and I only had a few freak-outs during the building process. With the exception of a faulty power source (that took a while to figure out!), the process was a really satisfying challenge.  I learned more about how a computer works (spoiler: it's magic) and proved to myself that I was far more capable of building a computer than I had given myself credit for.&lt;/p&gt;

&lt;h3&gt;
  
  
  Goal Setting &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;As part of the curriculum, I was paired with a staff adviser who would help me through my job search.  My first adviser was nice but didn't make me feel motivated.  My second adviser, Elissa, had been my computer science instructor.  I think it really helped that she had some background on me before we started working together.  She knew my strengths and weaknesses going into our relationship.  The greatest thing I learned from this adviser was the importance of setting goals.&lt;br&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F62p8p2aq645dl0eog0t3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F62p8p2aq645dl0eog0t3.jpg" alt="Checklist" width="700" height="466"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each week we would meet and discuss what I had accomplished since we last met.  Then, she would ask me to lay out what my plans were for the coming week.  Rather than let me say that I would apply for &lt;em&gt;more&lt;/em&gt; jobs, she had me commit to a number - 3 jobs, for example.  I wrote it down.  She wrote it down.  Then, when we reconvened, she would follow up on that goal.  She was understanding if I didn't always reach my goal.  I was busy and I had a life outside of my job seeking, but having a firm goal and knowing someone was keeping me accountable was a great help.&lt;/p&gt;

&lt;h3&gt;
  
  
  Persistence &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Over the course of planning and writing this post, I got a job!  143 applications, but it only takes one job to make an offer - and I got it!  &lt;/p&gt;

&lt;p&gt;Job seeking is hard, especially when trying to balance your time between working, seeking, networking and life in general.  It seems like you're just sending applications into the abyss.  I've heard that getting your first developer job is the hardest and I do hope that's true.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwzs4uryl7uvprryafddl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwzs4uryl7uvprryafddl.jpg" alt="Be brave!" width="700" height="467"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you're a job seeker, I hope you can take some comfort in knowing that it will happen for you if you put in the work.  Let me know in the comments what you have learned when things didn't go as you had planned.&lt;/p&gt;

</description>
      <category>jobsearch</category>
      <category>developer</category>
    </item>
    <item>
      <title>My Week With WordPress</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Mon, 10 Feb 2020 23:05:16 +0000</pubDate>
      <link>https://dev.to/lisacee/my-week-with-wordpress-331l</link>
      <guid>https://dev.to/lisacee/my-week-with-wordpress-331l</guid>
      <description>&lt;h2&gt;
  
  
  The Mess I've Created
&lt;/h2&gt;

&lt;p&gt;For a recent interview, I was given the challenge of creating a WordPress plugin.  I had only worked with PHP for about a week and I had just gotten WordPress running locally the day before my interview.  (I did tell both of these things to the interviewer.)&lt;/p&gt;

&lt;p&gt;I went through the usual phases of my development cycle:&lt;/p&gt;

&lt;p&gt;Confidence -&amp;gt; Uncertainty -&amp;gt; Insanity -&amp;gt; Breathe -&amp;gt; Make it Work&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EnzRhYDD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.pixabay.com/photo/2017/11/26/15/16/smiley-2979107__340.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EnzRhYDD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.pixabay.com/photo/2017/11/26/15/16/smiley-2979107__340.jpg" alt="my range of emotions" width="604" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I had many challenges, beyond just writing unfamiliar code.  I couldn't get my local environment running and under a time crunch, I tried to use a free web host for my testing environment.  (I quickly exceeded their allowances).&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Made It Work
&lt;/h2&gt;

&lt;p&gt;After I was locked out of my second free web host, I knew I had to get my local server running.  The WordPress download didn't include any server or database programs, so after a little research I installed &lt;a href="https://www.apachefriends.org/index.html"&gt;Xampp&lt;/a&gt; which was very easy to install and use.  &lt;/p&gt;

&lt;p&gt;Now I could finally breathe and write some code.  Or so I thought.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Not &lt;a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself"&gt;DRY&lt;/a&gt; Workflow
&lt;/h2&gt;

&lt;p&gt;My workflow was a frantic, panicked mess.  I didn't have time to dig in and properly learn WordPress.  I just had to make it work and go.  &lt;/p&gt;

&lt;p&gt;Here's what I did:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Write code&lt;/li&gt;
&lt;li&gt;Zip code files&lt;/li&gt;
&lt;li&gt;Upload zip to dashboard&lt;/li&gt;
&lt;li&gt;Install plugin&lt;/li&gt;
&lt;li&gt;Test&lt;/li&gt;
&lt;li&gt;Uninstall plugin&lt;/li&gt;
&lt;li&gt;Repeat&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SihNdof---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.pixabay.com/photo/2014/04/03/10/52/circle-311551__340.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SihNdof---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.pixabay.com/photo/2014/04/03/10/52/circle-311551__340.png" alt="repetitive workflow" width="340" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since I didn't have enough time to fully understand WordPress, my workflow was less than ideal and this is why I am writing you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Your Suggestions?
&lt;/h2&gt;

&lt;p&gt;So, now that I've made my code work and submitted my project, I'd like to learn how to do it better.  What are your experiences developing for WordPress?  How can I make my processes more DRY (dryer?)?&lt;/p&gt;

&lt;p&gt;Thanks for reading and cross your fingers for me getting this job 🤞.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>plugin</category>
      <category>interview</category>
      <category>php</category>
    </item>
    <item>
      <title>Lambda Strong</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Sun, 11 Aug 2019 23:20:16 +0000</pubDate>
      <link>https://dev.to/lisacee/lambda-strong-4mkg</link>
      <guid>https://dev.to/lisacee/lambda-strong-4mkg</guid>
      <description>&lt;p&gt;I went to my first meetup yesterday - we met at a restaurant.  I was anxious.  I over-planned things.  I checked the restaurant's menu, the parking situation.  I'm a worrier.  I always have been.  I know that meetups are an important part of networking and programmer culture, but I kept putting off attending one.  I am an introvert with generalized anxiety disorder.  I am relatively new to programming and I feel like I'm older than many of my peers.  But those are just excuses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TLDR:&lt;/strong&gt; I was really nervous, but I went to my first meetup and I'm so glad I did.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Little Setup...
&lt;/h2&gt;

&lt;p&gt;In 2018 I started attending &lt;a href="https://lambdaschool.com/" rel="noopener noreferrer"&gt;Lambda School&lt;/a&gt;, an online but in real-time computer science and web development program.  I worked my butt off for 13-months, to graduate with Lambda's first part-time cohort, while still working days at my paid job.  Needless to say, I didn't get out a lot.  And when I did socialize, my friends didn't get what I was studying.  They supported me and were happy for me, but their understanding still only goes as far as to know that I am going to build better websites.&lt;/p&gt;

&lt;p&gt;I think that Lambda School appreciates that most of its students are in situations similar to mine.  I have never met any of my classmates away from my computer.  While studying at Lambda was the best choice for my further education, online classes can be a bit isolating.  I knew my classmates well, but they lived all over the country, not people that I could easily meet or build my local network.  That may be why Lambda encourages local meetups and even pays a stipend of $25 per student for their shared meal or activity.&lt;/p&gt;

&lt;h2&gt;
  
  
  At the Meetup
&lt;/h2&gt;

&lt;p&gt;The meetup was at a Thai restaurant in Tacoma, WA.  Lambda School has had multiple meetups further north in Seattle, but I never attended one.  Tacoma is closer to where I live with less-scary traffic.  I couldn't make an excuse to not attend.  Any Lambda student or graduate in the region is welcome to attend the meetups, but by the luck of the draw, all of the attendees at my meetup were women (and a few boyfriend +1s).  While our lives are very different, we all had the wild experience of attending Lambda to bring us together.  And as we ate and talked, we discovered even more things we have in common:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We all have trouble turning our brains off after school or studying&lt;/li&gt;
&lt;li&gt;We all have awesome support systems&lt;/li&gt;
&lt;li&gt;Mismatched brackets make us all crazy&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fx6133cbq8axv9o2ihw9z.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fx6133cbq8axv9o2ihw9z.jpg" alt="Our meetup"&gt;&lt;/a&gt;&lt;/p&gt;
That's me in the front, left. Hi! 



&lt;p&gt;Meeting with these ladies made me feel less alone in my programming journey.  Even though I have graduated and some of these ladies have just started, we all had insights to share with each other.  Lambda's curriculum has evolved over time, so the newer students were able to tell me about the new technology and methods Lambda now teaches.  As the only graduate of our group, I shared about my job seeking ordeals.  I went in feeling embarrassed that I have not yet found my elusive first developer job, but nobody judged me.  As developers, we are all lifelong learners and our shared stories are just tools to add to our toolbelts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Last Thoughts
&lt;/h2&gt;

&lt;p&gt;I am so glad I went to this meetup and that Lambda School encouraged it.  I was really anxious about attending but by the end, I was tired but excited by my new connections.  The Lambda School meetups are monthly and I am committed to attending as many as my schedule allows.  In sharing just this one meal with these ladies, I was inspired to become more active in my Twitter game and to feel capable of writing this blog post.&lt;/p&gt;

&lt;p&gt;This meetup also made me feel brave and more confident about attending another, much larger, JavaScript meetup next month in Seattle.&lt;/p&gt;

&lt;p&gt;What are your experiences with meetups?  Let me know in the comments and thanks for reading.&lt;/p&gt;

</description>
      <category>networking</category>
      <category>meetup</category>
      <category>beginners</category>
      <category>bootcamps</category>
    </item>
    <item>
      <title>Do Better</title>
      <dc:creator>Lisa Cee</dc:creator>
      <pubDate>Thu, 07 Mar 2019 01:58:43 +0000</pubDate>
      <link>https://dev.to/lisacee/nevertheless-lisa-cee-coded--3ip3</link>
      <guid>https://dev.to/lisacee/nevertheless-lisa-cee-coded--3ip3</guid>
      <description>&lt;p&gt;After 20 years, I went back to school in 2018 to study web development and computer science at Lambda School. After working at a public library and helping hesitant computer users use terribly designed web sites I knew I can do better.&lt;/p&gt;

&lt;p&gt;I have worked really hard to get here, doing a 13-month, after-work program for all of 2018 and into 2019.&lt;/p&gt;

&lt;p&gt;I am excited to break into developing, knowing that I have the support and skills to help me make UX better for all.&lt;/p&gt;

</description>
      <category>wecoded</category>
    </item>
  </channel>
</rss>
