Forem: Alex Curtis-Slep | Looking for Remote Dev role

CSS Masonry Catness

Alex Curtis-Slep | Looking for Remote Dev role — Mon, 28 Oct 2024 12:02:42 +0000

CSS is like anything else in tech-it's always changing and evolving. An ongoing development in the space is CSS Grid Layout Module Level 3 aka CSS Masonry Layout. Theo made a video about how it's developing and the debate Apple and Google are having about how it gets implemented.

All of that got me excited to give CSS masonry a try! The WebKit photo demos inspired me to make a similar view with pics of cats! Who doesn't love cats?

Prerequisites

To view what we're going to build you'll need the Safari Technology Preview, or to make the feature flag layout.css.grid-template-masonry-value.enabled true in Firefox.

To access the feature flags in Firefox, type about:config in your address bar. Hit enter and you can search grid or the string mentioned above. Toggle it to true and you're good to go!

Basic familiarity with TypeScript/JavaScript, React, and Next.

Setup a new project

Create a new Next project in the terminal.

Run this command: npx create-next-app@latest

Then you may need to install the following package:

create-next-app@15.0.1
Ok to proceed? (y) y

Name your project. I call mine cat-pics-waterfall

Continue setting up the Next project in the terminal (be sure to not use Tailwind):

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

When your project is done setting up:

Change directories into your project by running this command in your terminal cd your-project-name.
Open it in VSCode by then running this command code . (setup this command if you haven't)

Remove the boilerplate

Inside the app folder there is a file called page.tsx This has all the code that is rendered in the boilerplate.

Remove that code and keep a div or fragment for now. Here's an example:

// app/page.tsx
export default function Home() {
  return <div></div>;
}

There's also a stylesheet for the page within the app folder. It's called page.module.css and you can open that up, select all the styles in it, and delete them.

Let's change our metadata and make it more clear what our app does. Update layout.tsx like so:

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Cat Pics",
  description: "Bringing cats your way with experimental CSS",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Add a cat favicon if you'd like too (how to add a favicon in Next)!

Create .env file

Create a .env file at the root of the project. This is where we'll store the API key from The Cat API.

Signup for The Cat API

Signup for a free API key from The Cat API. After the initial signup, you'll receive an email with your API key. Copy that API key and make a new variable in .env. I call my key CAT_KEY.

Your local .env should look like this: CAT_KEY=your_api_key. If you deploy this make sure to add this wherever it's deployed too.

Bring in the cat pics!

I glean from the aforementioned WebKit demos to create the page and styles for the cat pics. Here we call our API, map through the results, and render the pics that get returned:

// app/page.tsx
import styles from "./page.module.css";
const url = "https://api.thecatapi.com/v1/images/search?limit=50";
const api_key = process.env.CAT_KEY || '';

interface CatImage {
  id: string;
  url: string;
}

async function getCatPics() {
  try {
    const res = await fetch(url, {
      headers: {"x-api-key": api_key},
    });
    const result = await res.json();
    return result;
  } catch (error) {
    throw new Error(`Unable to get the cute cats! ${error}`);
  }
}

export default async function Home() {
  const cats = await getCatPics();

  return (
    <main className={styles.page}>
      {cats.map((cat: CatImage, index: number) => (
        <figure className={styles.card} key={cat.id}>
          <img
            className={styles.catPic}
            src={cat.url}
            alt={`Cat ${index + 1}`}
          />
        </figure>
      ))}
    </main>
  );
}

Style the pics

Now that we've brought in the pics, let's see CSS masonry in action! Taking a page out of WebKit's book, here is page.module.css:

.page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr);
  grid-template-rows: masonry; 
  gap: 1rem;
}

.card {
  position: relative;
  counter-increment: item-counter;
}

.catPic {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1ch;
}

If you save your files and run npm run dev in your terminal, it should give you a page like this (with images selected at random):

There's a lot of potential to build on top of this! The images maintain their quality and without media queries the page feels responsive. You can use what's coming here to CSS in other ways, Theo showcased them in his video and the demos from WebKit and Google do too.

It's sweet to be a developer right now. Lots of amazing tooling, features, runtimes, and more are being built. Time will tell exactly how this gets implemented in CSS. However it gets decided upon, the takeaway is that CSS is getting cooler.

Have a look at the repo I made for this project. I deployed it on Vercel too, if you use one of the two browser setups mentioned in the prerequisites, you can check it out here.

You can build a page that renders pictures of cats for the heck of it, or get stuff done at work. What do you think of these features coming to CSS? How are you going to use them?

Lessons from Starting an Open Source Project

Alex Curtis-Slep | Looking for Remote Dev role — Fri, 01 Dec 2023 02:50:22 +0000

Starting my own open source project has taught me a lot. While the project isn't mature, it's shifting my perspective on coding and how I approach each task. Let's get more granular about why these changes are occurring:

Clear Communication

There are tons of tasks we do as developers. Terminal configurations, GitHub actions, CSS, and everything in between. When we're coding on our own, or with folks we've worked with before, we tend to make assumptions.

We're using X framework, we don't need to import Y. This CSS isn't impacting the placement of the nav, for example.

When creating issues for new people to work on, being clear and concise is as important as a flavorful broth for soup. If there are questions a prospective contributor has, then you're losing valuable time and progress your project could be making.

On the contrary, when a developer can review the docs, setup their local environment, and work through the issue, you're both digging into a delicious open source roasted cauliflower bisque.

Don't just Code & Push to Main

Coding up a personal project and collaborating in open source are dramatically different workflows. Often feeling the liberty of working on my own thing I'd work and push to main to make things easier.

I'm rethinking that now. This project has me pivoting into a much more sane workflow. Make an issue and an accompanying branch, apply and push changes, and, if no conflicts arise, and it's a needed change, merge into main.

This helps break down each task I take on, not make unwanted changes (hopefully!), and is a flow contributors can follow.

I wholeheartedly love open source and was enamored by the concept early in life. Starting a project isn't for everyone, but navigating forward as a technologist with these learnings in mind might help you on your coding journey.

Volunteer at a Tech Conference!

Alex Curtis-Slep | Looking for Remote Dev role — Mon, 08 May 2023 12:28:59 +0000

I recently volunteered at the React Miami conference. Volunteering made the conference experience better than if I had just attended! Let's talk about why and why YOU should volunteer at a conference 😃

Network of Volunteers

Volunteering at a conference gets you around fellow volunteers. The volunteers are also in tech (usually), and you get to know them while volunteering together. If you're newer to tech (like me), or not sure if you'll know many people/make connections, volunteering shines as it builds you a network right off the bat!

Come curious, open-minded, and receptive to fellow volunteers and they'll introduce you to people they know. It snowballs from there! The volunteers for React Miami were incredible, hard working, and gregarious.

While every conference has it's own set of people, goals, and roles volunteers can fill, the people helping should be awesome.

Sense of Purpose

Tech conferences are a hoot, but they can be a lot too! Folks party hard, sometimes a little too hard. Volunteering can keep you from going too far off the deep end, keeping you engaged with what's happening in the talks and/or with attendees.

I mainly helped check people into the conference I recently attended. This was important early on, lots of folks showed up right at the beginning. It was great to help and welcome them!

Learn a Ton

React Miami featured amazing talks from people in many areas of tech. Being able to attend thanks to volunteering opened my eyes to so much. Video editing in the browser, metrics I hadn't heard of to measure web performance, and a demo of style queries, to name a few!

Learning continually is a pillar of a great technophile. Volunteer and use your free time to be a sponge and soak up all the transformative information you can absorb.

I haven't even broached the idea of traveling and volunteering at a conference you've been eyeing. There are lots of benefits, but these are the highlights for me. Shoutout to Grammerhub for making it possible for me to volunteer.

Take the plunge, you'll thank yourself after you volunteer, particularly if you're newer in tech, trust me!

Questions are a Developer Superpower

Alex Curtis-Slep | Looking for Remote Dev role — Fri, 18 Nov 2022 21:45:12 +0000

Asking questions is a developer superpower. Many new devs are often hesitant to ask questions though! It could be due to imposter syndrome, fear about the impression their question would bring, or any number of reasons.

Questions that are broad and over simplified are the wrong way to go. Before we look at great questions, let's look at questions people ask and how they could be improved:

Can you teach me to code?
How can I become a developer?

Learning to code and becoming a developer is great, but posing questions like this is similar to wondering if a buffet will serve food. Are you more of a visual person (who might prefer frontend development?)? Do you like sushi or would Indian cuisine be more your to your liking? Maybe working towards becoming a software reliability engineer would be best.

There are different types of developers, and the work they do varies widely. It depends, and in tech, it depends can be an answer to most things. That's why being specific and providing context can allow questions to get you unstuck when coding, endear you to a potential future colleague, and help others along their journey.

Here are examples of detailed questions:

I'm working on landing my first frontend developer role. My stack is React, Next, Node, and SQL. I've built my own projects, contributed to open source, and gotten two certifications (one in frontend, the other in API's/backend). What can I do to continue to learn, grow, and meet people who could help me land a job?
I tried running the e2e (end to end) tests but am returning errors. I noticed a recent change that was merged in changed a filename. I pulled in those changes, but could the change be causing an error elsewhere that's making the tests fail?

Another special part about tech is people want to help you. When you ask questions that are more in line with the last two examples, people are much more likely to give you an answer, or try and find someone who can give you an answer.

Developers are resourceful by necessity, but we all know not every single question has an exact answer from Google. Dig into what's making you curious. Be as detailed as you can, but also keep your question concise.

Questions can unlock your career as a developer. Remember how important they are, why they need to be well worded, and you'll be that much better of a developer!

Why you Should Participate in Hacktoberfest

Alex Curtis-Slep | Looking for Remote Dev role — Mon, 12 Sep 2022 14:05:50 +0000

Hacktoberfest is just around the corner. Hacktoberfest is a yearly event put on by DigitalOcean. Open source projects take contributions from anyone and the first 40,000 participants who complete Hacktoberfest (complete = four separate changes to projects that get accepted) earn either a shirt or a tree planted in their name. It's September now and you have time to prepare to jump into the fun.

Why should you participate in Hacktoberfest?

1. Make a difference.

You'd be surprised how much small changes mean for a project. The more a project scales, the easier it is for small errors to live within it. You can correct documentation, edit files that have typos, and make a meaningful difference in tech.

While fixing typos may be seemingly insignificant, across hundreds of thousands of projects, the more people do it, the more accurate and production ready open source becomes as a whole.

2. Find community.

The people who run and actively contribute to open source are amazing (almost always!). Many open source projects have a Discord or Slack for folks to socialize and share links, etc.

I've contributed to multiple open source projects and enjoyed talking with maintainers and contributors. One community that I joined earlier this year was Novu.

Another awesome part of open source is pairing with someone else (I talk more about my pairing experience here). This gets you chatting with someone who may know more than you, or at least wants to talk it out and work towards a solution.

While working through issues I was having on my local version of the project, we talked about where we live and how each place would be a great place to visit (among other things).

No matter how technical or not technical you feel you are, you can find people with common interests! The possibilities are endless for what that could do for you. You could land a job, experience a different country or town like you never have before, or finally find someone else who feels just as passionate about pickleball (for example) as you!

3. Discover newfound passion.

When you go down a new street, you might discover a new coffee shop that has a terrific atmosphere and views. Similarly when contributing to projects that you may not have been exposed to before, you might find you love machine learning, computer vision, or making sure all the tests pass when you're squashing a bug!

People tend to think that coding is only for a specific subset of individuals. The beautiful part about Hacktoberfest is it presents a chance for people from all walks of life to take off that veil and test the technical waters.

While your contributions don't have to be incredibly technical, be open minded, take the plunge, and see how you go!

Two Ways to Get Noticed in the Tech Job Hunt

Alex Curtis-Slep | Looking for Remote Dev role — Thu, 07 Apr 2022 00:34:10 +0000

You're fresh out of a bootcamp, a seasoned self-taught developer, maybe even have a CS degree under your belt. That's fine and dandy, but what can you do to catch the eyes of potential employers in tech? What can you do to pole vault yourself into interviews and even offers?

These are in no particular order!

Cold Email the Recruiter

Applying to a job and calling it a day may work for some, but when you're breaking into tech, go the extra mile. After you apply to a job, email the recruiter. Jobs on LinkedIn sometimes have the individual who posted the job listed, but many of them don't (if the person who posted the job is listed, skip down to the Cold Email Time header). Go to LinkedIn and search for the company where you applied.

For example:

From there, click on the company's profile page (Postman in this case), and find and click on the employees:

Then you'll look for the All filters button towards the top right. Click on that and then scroll down the different filters until you get to the keywords section. There you can type in recruiter under title:

From there, look for the recruiter who works with tech talent, or has the most experience at the company.

Cold Email Time

Even if you don't have LinkedIn premium (which you don't need!), you can and should send a message to the recruiter. Please note that sending a note along with your connection request is NOT available on the LinkedIn mobile app at the time of this writing.

Check this out to learn how to hone your cold email skills.

Thanks to Ian, who has a Tech Interview Guide for showing this on his Twitch steam.

Find an Error in the Job Description and @ the Company

Not every job description has errors in it, but you'd be surprised how many do! This strategy got me a job interview, here's what happened:

This goes to show that it's always important to do your due diligence when looking for work. Read the job description, research the company, and make sure you have a solid understanding of why you fit the role you're applying for.

Whilst being discerning, if you see a glaring mistake in the job description like this, use it your advantage. Tweet at the company, and say you're applying while pointing out the mistake. Hiring managers don't want to have mistakes out in the public, but you can use that to get your foot in the door.

Don't be afraid to see if the door is unlocked 😉

The worst things companies can say to you is no. Don't let rejections get you down. It's part of the journey, and you'll go further faster if you focus on what you can control. Hope these tips help you in the job hunt!

Fall in Love with Open Source 🍁

Alex Curtis-Slep | Looking for Remote Dev role — Fri, 05 Nov 2021 22:28:26 +0000

Last month I participated in Hacktoberfest. I made four contributions to open source projects. I learned a bunch, got more development experience, and solidified a bond with open source.

2021 was the eighth year Hacktoberfest rocked and rolled. Last year there were 166,057 PR's merged and this year probably eclipsed that!

Open source has always intrigued me and I jumped into making contributions before Hacktoberfest. Having gone through Hacktoberfest I can say that it lit a spark under me.

I did brand new things like create a robots.txt file. Never knew about them before! I made that file for an Elm project. I had never heard of Elm before.

The magic behind Hacktoberfest and open source runs deep. Not only are there new languages, techniques, and concepts you can indulge in, there are amazing maintainers and contributors you can collaborate and learn from.

I had Zoom sessions with two project maintainers. They were both super helpful, upbeat and willing to help in any and every way. Shout out to @kirkcodes and @nickytonline 🙌.

Kirk's project was the Elm game I made a robots.txt for. Not only was he helpful with any questions I had, he gave me a great overview of Elm! I had done some research on it, but hearing more about it from someone using it shed even more light on Elm.

Nick's web3 starter project accounted for two of my contributions. The second of the two issues was trickier than the first. I needed to get Storybook working with webpack5.

This is a relatively new setup and Nick made updates to his code-base that helped smooth things out. After hitting roadblocks on my own I jumped on a call with Nick, pulled in recent changes, and got it running smoothly.

Pair programming is a part of working on any team and these were great examples of the power it yields. Open source can offer these important experiences for any developer at any level.

Going forward I'll do Hacktoberfest every year. It's an opportunity to work on new projects, skills and with folks you may have never worked before.

Open source doesn't just open its doors in October either. Contributions can be made all year round.

There's a special energy that emanates when everyone is diving into open source collectively. Hacktoberfest and the community at Virtual Coffee made it special.

No matter what time of year it is, find projects you'd like to contribute to. Ask to be assigned to an issue, work and seek help as needed, and get your PR merged like a boss!