Forem: Charlie Say

Building GitHub Airlines

Charlie Say — Wed, 27 Nov 2024 12:04:35 +0000

Building GitHub Airlines: A Fun Side Project in 2 Hours ✈️

G'day folks! Today I want to share a fun little project I whipped up in just a couple of hours - GitHub Airlines, a web app that turns your GitHub profile into a proper fancy boarding pass. Because why should your GitHub stats be boring when they could be aviation-themed? 🛩️

The Inspiration ✨

You know those moments when you're procrastinating on GitHub, looking at your stats for the millionth time? Well, I thought, "Wouldn't it be brilliant if these numbers looked more like a boarding pass?" And thus, GitHub Airlines was born!

What We Built 🏗️

GitHub Airlines is a React app that:

Fetches your GitHub stats using the REST API
Generates a snazzy boarding pass with your data
Includes different themes (or "ticket classes" as we're calling them)
Works on both mobile and desktop
Includes a proper QR code linking to your profile

The Tech Stack 🛠️

We kept it simple but modern:

Vite + React (Because ain't nobody got time for slow builds)
TypeScript (For catching those pesky bugs)
Tailwind CSS (Making things pretty without the faff)
GitHub REST API (The source of all our lovely data)
Lucide React (For those snazzy icons)

The Build Process 🚀

1. Setting Up the Foundation

First things first, we got our Vite + React + TypeScript project up and running. Vite's brilliant for quick development - it's proper fast!

2. GitHub API Integration

We kept it simple with the REST API - no need for authentication, just straight public data fetching:

const fetchGitHubData = async (username: string) => {
  const [userResponse, reposResponse] = await Promise.all([
    fetch(`https://api.github.com/users/${username}`),
    fetch(`https://api.github.com/users/${username}/repos`)
  ]);
  // Transform the data into boarding pass format
};

3. The Boarding Pass Design

This was the fun bit! We used Tailwind CSS to create a proper airline ticket look:

Moving banner at the top (because why not?)
QR code linking to your profile
Different sections for various GitHub stats
Multiple themes to choose from

4. Making it Responsive

Because nobody likes a boarding pass that doesn't fit on their phone, right?

Lessons Learned 📚

Keep It Simple: We could've added loads more features, but sometimes less is more
Design First: Having a clear vision of the design made development much smoother
Mobile First: Always think about mobile users from the start

Try It Yourself! 🎮

Want to see your GitHub profile as a boarding pass? Check out the live demo or grab the source code.

What's Next? 🤔

This was just a 2-hour build, but there's so much more we could add:

More ticket classes (themes)
Animated transitions
Achievement badges
Flight history (commit history)

Get Involved! 🤝

The project is completely open source, and we'd love your contributions! Whether it's adding new features, fixing bugs, or just giving feedback - every bit helps!

Have you built any fun projects with the GitHub API? Or got any ideas for making GitHub Airlines even better? Drop a comment below - I'd love to hear your thoughts!

And remember, the sky's not the limit when you're coding! ✈️

webdev #typescript #react #github #opensource

Turbopack vs Webpack: Has Webpack’s Creator Built Its Own Replacement?

Charlie Say — Wed, 09 Oct 2024 23:00:00 +0000

Turbopack, from the creators of Webpack, claims to be 10x faster than its predecessor. But does that mean we’re all abandoning Webpack soon? It’s still early days, but if Turbopack delivers on its speed promises, Webpack could finally be dethroned. Have you tried it? Is Turbopack the future?

Deno vs Node.js: Is Deno Really the Better Node?

Charlie Say — Wed, 02 Oct 2024 23:00:00 +0000

Deno promised a secure, modern runtime with a built-in TypeScript compiler and no dependency hell. But is it really ready to topple Node.js, which is still powering most of the web? Deno has some cool ideas, but the ecosystem is still maturing, while Node has a decade of libraries and frameworks. What do you think? Has Deno earned a spot in your stack, or is it just hype?

useActionState: Streamlining React Form State Management 🔄

Charlie Say — Sat, 28 Sep 2024 08:00:00 +0000

useActionState: Streamlining React Form State Management 🔄

Hello, fellow React developers! Today, we’re diving into useActionState—a powerful new hook that could change the way we handle form state in React. 🚀

What is useActionState? 🤔

useActionState is one of React’s latest hooks, created to simplify form state management. It’s particularly useful when combined with Server Components, bridging the gap between client-side interactivity and server-side processing.

The Syntax 📝

const [state, formAction] = useActionState(fn, initialState, permalink?);

This hook takes three parameters:

fn: Your action function
initialState: The initial state value
permalink: (Optional) A URL for progressive enhancement

It returns:

The current state
A new action to use with your form

Why It Matters 💡

Boosts Server-Side Rendering: When paired with Server Components, it allows forms to be interactive before the client fully loads JavaScript.
Simplified State Management: It automatically handles form state updates.
Progressive Enhancement: The optional permalink parameter supports functionality even when JavaScript is disabled.

Practical Example: Before and After 🛠️

Let’s see how useActionState compares to the traditional approach when updating a user profile.

Before: Traditional Approach

import React, { useState } from 'react';

async function updateProfile(updates) {
  // Simulating an API call
  return await apiUpdateProfile(updates);
}

function ProfileForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [isSuccess, setIsSuccess] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await updateProfile({ name, email });
      setIsSuccess(true);
      setMessage('Profile updated successfully!');
    } catch (error) {
      setIsSuccess(false);
      setMessage('Failed to update profile. Please try again.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Update Profile</button>
      {message && (
        <p style={{ color: isSuccess ? 'green' : 'red' }}>{message}</p>
      )}
    </form>
  );
}

After: Using useActionState

import { useActionState } from 'react';

async function updateProfile(prevState, formData) {
  const updates = Object.fromEntries(formData.entries());
  try {
    // Simulating an API call
    await apiUpdateProfile(updates);
    return { success: true, message: 'Profile updated successfully!' };
  } catch (error) {
    return { success: false, message: 'Failed to update profile. Please try again.' };
  }
}

function ProfileForm() {
  const [state, formAction] = useActionState(updateProfile, { success: null, message: '' });

  return (
    <form action={formAction}>
      <input type="text" name="name" placeholder="Name" />
      <input type="email" name="email" placeholder="Email" />
      <button type="submit">Update Profile</button>
      {state.message && (
        <p style={{ color: state.success ? 'green' : 'red' }}>{state.message}</p>
      )}
    </form>
  );
}

Key Differences 🔑

State Management: The traditional approach requires multiple useState hooks and manual updates, while useActionState automates this.
Form Submission: Instead of a custom onSubmit handler, useActionState uses the action prop with formAction.
Data Handling: useActionState automatically provides the form data, whereas the traditional method requires manual data handling.
Code Simplicity: The useActionState version is more concise, requiring less boilerplate.
Server Integration: useActionState is designed to work with Server Components, improving performance and the user experience.

Considerations 🧐

useActionState is available in React's Canary and experimental channels.
The action function gets an extra first argument (the previous state), so its signature differs slightly from standard form actions.

Wrapping Up 🎁

As the examples show, useActionState streamlines form state management in React. It reduces boilerplate code, integrates well with server-side logic, and can improve performance, especially when used with Server Components.

By using useActionState, you can write more concise, maintainable, and efficient forms. Try it out in your next project and see the benefits for yourself!

BiomeJS vs ESLint: Is the New Kid on the Block Worth the Switch?

Charlie Say — Wed, 25 Sep 2024 20:30:56 +0000

ESLint has been the tried and true tool for keeping JavaScript codebases clean. But now we’ve got BiomeJS, a fresh tool combining formatting and linting. It's faster and built on Rust, making it appealing for those looking to reduce tooling overhead. But can it really replace ESLint in a larger setup?

Have you made the switch, or are you sticking with the ESLint/Prettier combo? Let's discuss.

Are you or are you not worried about ChatGPT and its capabilities?

Charlie Say — Thu, 16 Mar 2023 09:36:52 +0000

With ChatGPT-4's release just around the corner and its rumoured capabilities - are you worried about it and your future as developers?

If so why?

Need another side project idea?

Charlie Say — Tue, 31 Jan 2023 09:33:20 +0000

⚠️ There has been alot of traffic since this post! If you see a bug, or there isnt a project you want - please feel free to help out! We are open source and would love more developers involved! ⚠️

As a developer, you are constantly on the lookout for ways to improve your skills, learn new technologies and build something meaningful. But sometimes, inspiration can be hard to come by. This is where 100Projects.dev comes in - a resource for developers looking to find their next side project idea.

This website is a curated collection of over 100 project ideas, categorised by type (Full-stack, games, desktop, backend, etc.), language (Java, Rust, etc.) and difficulty level. Whether you're a seasoned developer or just starting out, you'll find something to suit your skills and interests.

Best of all, 100Projects.dev is open-source, so anyone can contribute. Whether you want to add a new project idea, contribute code or help fix a bug, there's a place for you. The community is growing and it's a great way to get involved and give back to the developer community. Check out the web repository and project content repository on GitHub.

So, what are you waiting for? Unleash your creativity with 100Projects.dev and discover your next side project idea today.

Note: If you want to give back to the open-source community and work on an easy interesting project that helps grow developers, check out the open GitHub issues on the 100Projects.dev repository. Help make the platform even better for developers everywhere.
P.s - literally no catch here, lets just make developing a better world for everyone.

Screenshots

AWS Amplify - your first app

Charlie Say — Sat, 07 Jan 2023 09:36:18 +0000

Welcome to your first app with AWS Amplify! In this article, I’ll introduce you to the powerful set of tools and services that make up AWS Amplify, and guide you through the process of getting started with them.

What is AWS Amplify?

AWS Amplify is a collection of tools and services that makes it easy for you to build, deploy, and manage mobile and web applications on the AWS cloud. It provides a range of features and services that help you develop, test, and deploy your applications with ease, including:

A command-line interface (CLI) for building and deploying your applications
A set of libraries for accessing AWS services from your app
A range of pre-built UI components for building user interfaces
Tools for testing and debugging your applications

Why or Why not AWS Amplify?

Pros

Ease of use: AWS Amplify makes it easy for developers to build, deploy, and manage applications on the AWS cloud. With a simple command-line interface and a range of pre-built UI components and libraries, Amplify takes care of much of the heavy lifting involved in cloud development, allowing developers to focus on building great experiences for their users.
Scalability: Amplify applications can automatically scale to meet the needs of your users, whether you have a few hundred or millions of them. This makes it easy to build apps that can handle heavy traffic and grow with your business.
Integration with other AWS services: Amplify integrates seamlessly with other AWS services, such as Amazon S3, Amazon Cognito, and Amazon DynamoDB. This makes it easy to build apps that take advantage of the full range of AWS features and capabilities.
Cost-effective: Amplify provides a pay-as-you-go pricing model, which means that you only pay for the resources you use. This can be a cost-effective way to build and deploy apps, especially if you are just starting out or don't have a lot of resources.

Cons

Limited to AWS: Amplify is designed specifically for building applications on the AWS cloud. If you are looking for a more general-purpose development platform, you may want to consider other options.
Learning curve (until you’ve read this article!) : While Amplify is generally easy to use, there is still a learning curve involved in getting started with the platform. You will need to become familiar with the various AWS services and tools that Amplify provides, as well as the Amplify CLI and libraries.
Dependency on AWS: Because Amplify is tightly integrated with AWS, you will need to have an AWS account and be familiar with the AWS ecosystem in order to use it. If you are not already familiar with AWS, you may need to spend some time learning about the platform before you can get started with Amplify.

Getting started with AWS Amplify

Getting started with AWS Amplify is easy! The first step is to install the Amplify CLI on your machine. This is a simple process that involves downloading the CLI and running a few commands to set it up.

To download the Amplify CLI, visit the AWS Amplify documentation. Follow the instructions provided there to install the CLI on your system.

Once you have the Amplify CLI installed, you can use it to create a new Amplify project. This will create a new folder on your machine with a basic file structure and some starter code. To create a new project, open a terminal and navigate to the folder where you want to create your project. Then, run the following command:

amplify init

This will prompt you to provide some information about your project, such as its name and the region where you want to host it. Once you have provided this information, the Amplify CLI will create a new project for you and set up the necessary files and directories.

With your Amplify project set up, you can use the CLI to add the AWS services that you want to use in your application. For example, you might want to add a database or authentication service. To add a service to your project, run the following command:

amplify add <service>

Replace <service> with the name of the service that you want to add. For example, to add a database service, you would run amplify add database. The Amplify CLI will then guide you through the process of setting up and configuring the service for your project.

Building your first app with AWS Amplify

Great! Now that you have your Amplify project set up, it's time to start building your first app. As I mentioned earlier, Amplify provides a range of libraries and UI components that make it easy to build scalable applications quickly.

To get started, let's create a new component for our app using the Amplify CLI. In your terminal, navigate to your Amplify project folder and run the following command:

amplify add component

This will prompt you to select a type of component to create. For this example, let's choose a "Form" component. The Amplify CLI will then ask you to name your component and provide a few additional details. Once you have provided this information, the CLI will generate a new file for your component in your project folder.

The file that the Amplify CLI generates for your component will contain some basic code and a template that you can use to build your component. Here is an example of what the file might look like:

import React from 'react';
import { Form } from '@aws-amplify/ui-react';

const MyForm = () => (
  <Form>
    <Form.Field label="First Name" name="firstName" required />
    <Form.Field label="Last Name" name="lastName" required />
    <Form.Field label="Email" name="email" required type="email" />
    <Form.Field label="Phone Number" name="phoneNumber" type="tel" />
    <Form.Button type="submit">Submit</Form.Button>
  </Form>
);

export default MyForm;

This code creates a simple form with four input fields and a submit button. The Form component is provided by the @aws-amplify/ui-react library, which is a collection of pre-built UI components that you can use to build your app's user interface.

You can customize this form by adding your own HTML, CSS, and JavaScript as needed. For example, you might want to add some additional fields or validation to the form, or style it to match your app's branding.

Once you have your component set up the way you want it, you can use the Amplify CLI to deploy it to the cloud. This will create a new instance of your app on AWS, making it available to users around the world.

To deploy your component, simply run the following command in your terminal:

amplify publish

This will build your app and upload it to AWS, where it will be hosted and served to users. You can then access your app by visiting the URL provided by the Amplify CLI in your browser.

When you run the amplify publish command to deploy your app, the Amplify CLI will output a URL that you can use to access your app in a web browser. The exact format of this URL will depend on the specific hosting provider that you are using with Amplify, but it will typically look something like this:

https://<your-app-id>.aws-amplify.com

For example, if your app's ID is "my-amplify-app", the URL to access your app would be:

https://my-amplify-app.aws-amplify.com

You can also use the Amplify CLI to view a list of your deployed apps and their URLs by running the following command:

amplify hosting list

This will output a list of all the apps that you have deployed with Amplify, along with their URLs and other relevant information. You can then use these URLs to access your apps in a web browser.

Conclusion

And thats it you have completed and made your first AWS amplify app…

I hope you found this article helpful and are now well on your way to becoming an expert in building and deploying mobile and web applications on the AWS cloud.
if you ever get stuck, the AWS Amplify documentation is always there to help. And hey, if you're feeling especially confident now that you're an AWS Amplify expert, you might even try your hand at building a cloud-powered magic 8-ball. Who knows, it might just become the next big thing!

Impostor Syndrome in software engineering

Charlie Say — Wed, 04 Jan 2023 10:09:15 +0000

Impostor syndrome in software - and how to get over it.

Hey there! If you're reading this, you may have experienced impostor syndrome at some point in your career. Don't worry, you're not alone. Impostor syndrome is a common experience among software professionals, and it can be a real hindrance to your success and well-being.

Now I am not claiming to be an expert in this, there are MILLIONS of way more qualified people out there than me to talk about it, however as someone who’s experienced it in past and to this day still does - I just want to give my 2 cents in this article before pointing you towards some REALLY good resources.

So, what exactly is impostor syndrome? Simply put, it's the feeling that you're not as competent or qualified as others believe you to be. It's the fear that you'll be exposed as a fraud or an impostor, despite evidence to the contrary.

Impostor syndrome can show up in a variety of ways. You might feel like you're not smart enough or skilled enough to do your job, or that you don't deserve the recognition or success you've achieved. You might also have a hard time accepting compliments or believing in your own abilities.

Impostor syndrome can be especially common in the software industry, where the pace of change is fast and there's always something new to learn (especially with a new javascript every 2 minutes, hey yooooo). It's easy to feel like you're falling behind or that you don't measure up to your peers.

So, how did I overcome impostor syndrome? Here are a few strategies that might help:

Recognize that impostor syndrome is a common experience. It's not just you! Knowing that you're not alone can help you feel less isolated and more able to cope with your feelings.
Seek out mentors and role models. Surrounding yourself with supportive, accomplished people can help you see that success is possible and that you're on the right track.
Practice self-compassion. Be kind to yourself when you make mistakes or feel unsure of yourself. Remember that everyone makes mistakes and that it's okay to ask for help.
Reframe your thinking. Instead of telling yourself that you're not good enough, try saying things like "I'm learning and growing" or "I'm doing the best I can."
Take care of yourself. Make sure you're getting enough rest, exercise, and healthy food. Taking care of your physical and mental health can help you feel more resilient and better able to cope with stress.

If you're still struggling with impostor syndrome, you might find it helpful to listen to podcasts or read articles by people who have experienced it and overcome it. Here are a few resources you might find useful:

Heres the thing, I'm still struggling with this daily. I recently started a new job and feel out of my depth. But it's okay to be uncomfortable. It's okay to feel like you don't know everything. In fact, it's a normal part of learning and growing. The important thing is to keep pushing yourself, to keep asking for help when you need it, and to be kind to yourself along the way.

Remember, you're not an impostor. You're a talented, capable software professional, and you deserve to be where you are. Keep believing in yourself and you'll go far.

What side-project are you currently working on?

Charlie Say — Fri, 16 Dec 2022 15:00:42 +0000

Side projects, we are working on them here and there

Im working on a resource for developers to be able to get inspiration as to what 'side-project' to do next to keep learning.

So what is your current side-project that you are working on?

Do you contribute to OSS (& if so/not why?)

Charlie Say — Mon, 11 Jul 2022 12:56:11 +0000

You use OSS projects everyday. VS Code, TensorFlow, React-Native, most NPM packages etc.

And as it is in the name, is changeable (within reason obviously) by anyone. Report bugs, solve bugs, new features, suggest new features...

All for the common good of improving software.

I personally don't have as much time as I use to therefore do not contribute anymore, but I use to!

So do you contribute to OSS and if so/not why?

Oh no! All languages are being erased - you can only save one - what is it?

Charlie Say — Tue, 05 Jul 2022 15:06:39 +0000

And before you say “binary” and try to catch me out 👀

I am talking top level languages, so binary and assembly still exist and yes this is trivial I know they do different things....

i'd pick JS for obvious reasons, cause I love it and hate it.