Forem: William McGonagle

We Rebuilt Our Website– Here's What We Learned.

William McGonagle — Wed, 28 Dec 2022 00:17:18 +0000

We recently just rebuilt our entire website in Gatsby and Tailwind. The reason? Our last website sucked.

The original website was written in Pure HTML and optimized with Parcel, which led to more headaches than benefits. We thought that doing this would make the website fast, but in reality, we were just shooting ourselves in the foot.

Our new website was rewritten from the ground up. All of the data on the site is served from JSON files, allowing for us to add new projects, team members, and partnerships within minutes. The best part? It has better SEO than our last interation.

Check out the website here, and the Github repository here

Speedy Libraries Are Fast

When Gatsby branded itself as a fast, efficient, and search-optimized, I didn't believe them. I thought it was just another react-based library doing the same things. So, we built the first website in pure HTML because we thought it would be faster. But, it wasn't.

So, when people say that fast things are fast, they usually are.

Make Life Easy, Not Hard

We really made our life hard when we decided to do pure-HTML. Adding new pages would take days, changing text would require navigating through thousands of lines of code, etc. Now, a ton of our pages are written with DSG in mind. This means that the data in our JSON files can create thousands of pages in seconds.

Get Help from the Community

The biggest take-away that we got from this relaunch was using the community to our advantage. We created tons of issues on Github, and had a lot of community involvement. If we didn't do this, the website wouldn't be a fraction as awesome as it is now.

Give us some feedback!

We would love to hear your comments and concerns about the new website, so feel free to comment down below or create new issues on the Github page (We have a better chance of hearing you if you leave an issue on Github though).

🤯 Wait... You’re building a code simulator?!

William McGonagle — Wed, 05 Oct 2022 14:00:31 +0000

If you’ve been following me on Dev.to for the last few months, your probably asking yourself- where have you been? Well, I’ve been busy running a non-profit and so haven’t had the time to write. Sorry!

But, we’ve been working on some cool stuff and through the next couple of days we are going to be sharing it- so stay posted.

What’s the code simulator?
We’ve been working on a system similar to Repl.it but we came upon a realization: we need to run the code that people write with our tool. So, how do you run code?

Most companies that do REPL (Read Eval Print Loop), just use code execution engines in the cloud. These engines are just monolithic computers with tons of programming languages installed on them. Whenever a language needs to be run, it just uses the language’s CLI on the machine. But, this requires an internet connection.

A large number of the people using our application won’t have an internet connection, and so we have to build the system to work for these people too. We could put an entire code execution engine onto their computers, but that would take up way too much disk space. So, the alternative is simulating the behaviors of each programming language.

The simulation is actually quite simple, we are just translating all of the code into a common Abstract Syntax Tree (a tree based way to store information about a program), and from there, we just interpret the Abstract Syntax Tree like it’s any other language.

Help if you can!
This sounds really simple in practice, but it’s not. And so, if you have any experience working with flutter, dart, or programming languages, we could really use some help. Feel free to check out the project and contribute!

Github URL
Irishman on Pub.get

🚧 What Would You Change About this Website?

William McGonagle — Wed, 27 Apr 2022 21:08:25 +0000

I've been working on this non-profit for a while, and we just finished rebuilding the entire website. Before, it was in vanilla Javascript, HTML, and CSS, but now its a mix of Gatsby, Theme UI, and glorious Server-Side Rendering. It took a few weeks to complete this, but now that it is done, I'm super proud of the result- I just want to know what you think.

The New Website


if (isGood) 
{ 
     giveItAUnicorn() 
} 
else 
{
     commentWhatYouWouldChange()
}

If you would like to help work on the project, you can drop a comment on this post and say that you would like to help.

And finally, make sure to comment what you like about the website or what you don't like. All of the functionality is there, so you can even create an account if you would like!

🤓 What Would You Add to this Discord Server?

William McGonagle — Sat, 08 Jan 2022 19:05:56 +0000

We just created a discord server and we need to know what you think about it. Please leave comments about what we should add, get rid of, and what you would want the server to become!

See the Server Here

🤔 What Suggestions Do You Have for this Discord Server?

William McGonagle — Fri, 07 Jan 2022 03:39:56 +0000

For the Fairfield Programming Association, we're going to be launching a Discord server. But, we really want your feedback about how you think the server should function and what features you want. We have one of the best bot programmers that there is working on our discord bot, but we don't want the server to be an average one.

So, we thought that we should get feedback from you guys about what you like about the server and what you would change. Also, if you have any features you would suggest, please let me know, I would love to hear them.

You can see the server here!

🤔 What Would You Change About this Website?

William McGonagle — Thu, 06 Jan 2022 02:16:58 +0000

Hey- I'm working on this website, and I was wondering what you would change about it. I know it's not perfect at this point, and that's why I want your opinion on it.

You can check it out here.

If I build the entire website on a bad foundation, it will just end up being a bad website. So, I would rather get feedback now (no matter how harsh it will be) than building a ugly mess and not knowing until afterwards.

You can also check out our discord server here!

🥳 How to Get More Stars on Github! (Part 2)

William McGonagle — Sun, 02 Jan 2022 21:05:05 +0000

I’ve been working on eaf-linter for about a few days now, and it already has 6 stars and 2 forks. My other project that I've been working on, the Backend Server, has 14 stars, 9 forks, and nearly 10 outside contributors. That might not sound like a lot, but both of these projects are only about a week old.

So, how did I do it?

The most important thing has been issues, which I talked about here. But, the second most important thing has been designing a great readme.

A good readme is the difference between someone staring your project and someone ignoring it. If you have badges, easily understandable features, and lots of images, you have a star worthy repository.

First, you need to have badges. If you don't know what a badge is, it's the little image that says how many stars, downloads, etc. a project has. These are also known as shields, and you can get them from this website. If you have a ton of them and they all say good things, it increases the confidence that someone has in your project.

Secondly, you need easily understandable features. If you look at my newest repository, eaf-linter, you will see that all of the features have a simple headline and they link to a new page. This is very important. If your feature can link to a more in depth description of the feature, it will increase the confidence that the possible contributor has in your project.

Finally, images are super important. In my backend server, I have a ton of really eye-catching images. These images increase the likelihood that someone will keep looking through your readme, and the longer that the person stays on your page, the more likely they are to star your repository.

There will be more tips like this coming tomorrow and the day after, so if you liked hearing this, make sure to follow me, so you can see more tips as they come out.

Also, our open-source, non-profit is hiring right now if you're interested. Don't forget to follow us on LinkedIn.

🤪 Tell me how to build a duplicate detection system!

William McGonagle — Sat, 01 Jan 2022 19:47:08 +0000

I'm working on a linter right now, and one of the requested features for it was code duplication detection. I made an issue for it already, but I need to start working on it. And, that's where my question lies.

I can either build the system to detect the duplications based on plain text. This is how most systems work because it is the simpler of the two options. But, it is also the most failure prone. For instance, this system would fail if there was the same exact code in two places, but there was a comment in the middle of one of them- it would not register as a duplicate.

Alternatively, I can use an abstract syntax tree to detect the duplications. But, theres another problem there- what is the most-lightweight and all-around-best javascript parser out there? I'm planning on using the babel parser but I'm already running into a problem because it doesn't parse the comments in a way I would like.

So, if you have an opinion on what I should do, please leave a comment below. Also, please star the project and contribute if you have time. If you can, that would be amazing, and I thank you so much!

🤯 How to Get More Stars on GitHub!

William McGonagle — Fri, 31 Dec 2021 16:01:59 +0000

I’ve been working on my open-source backend server for about a week now, and it already has about 12 stars, 9 forks, and nearly 10 outside contributors. That might not sound like a lot, but the project is only a week old and it isn’t a package or anything that can be used by outside people.

So, how did I do it?

The most important thing has been issues. When GitHub was developing issues, they secretly made the most overpowered label that there is, “good first issue”. I can guarantee that if you create a new issue every two hours on your repository that has “good first issue” on it, you will get outside collaborators.

Don’t forget to Star the Backend Server

What else can help with your labels? If you use emojis in the title, anyone that sees your issue will be instantly drawn to it because it is more colorful. This will increase the amount of views on your issue, and increase the likelihood of someone to help you with it as well.

Finally, if you create a todo list in every issue, this tricks the GitHub system into thinking it’s a bigger issue, and it also tricks the websites, like ‘goodfirstissues.com’ into moving it higher in the rankings.

There will be more tips like this coming tomorrow and the day after, so if you liked hearing this, make sure to follow me, so you can see more tips as they come out.

🤬 What's your opinion on Linters, Prettiers, and Testers?

William McGonagle — Thu, 30 Dec 2021 21:36:37 +0000

I’ve been working on a project recently and a bunch of people suggested that I should start using a testing system. This testing system was working for a while but then someone else suggested that I should start using a linter. The linter ended up breaking all of my testing code, and before long I had spend nearly three hours getting them working together.

Here was the project if you want to check it out

After that, I was told that the code was inconsistently formatted, so I needed to add a prettier system. All of my engineers are now telling me that they have lost countless man-hours battling against this new integration system.

So, I’m getting rid of it. My entire linter system, code grading, beautifier, etc. is gone. And, I’m replacing it with my own solution- if you want something done right, you have to do it yourself.

I want to hear what struggles you have had with your “systems to boost efficiency”, or if you think I am completely wrong and should shut up.

🤔 How should I build my Frontend for a huge project?

William McGonagle — Wed, 29 Dec 2021 22:44:02 +0000

I’ve been working on building a non-profit, open-source organization for a while now and we have gotten to a solid point in the backend code. We have authentication, an event and rsvp system, profile picture generator, etc. If you want to check it out, you can here.

I’m also working on a frontend, but I’m at a stage where I can change the stack for it completely, so I wanted to hear your suggestions! You can check out the code so far here, and the domain for the website is fairfieldprogramming.org.

Do you think I should switch to react, pure html/css, or should I use vue? And how do you think I should communicate with the server?

😳 Generating over 1,240,000 Profile Pictures at Runtime

William McGonagle — Wed, 29 Dec 2021 04:40:02 +0000

So here’s a problem- you’re building a social media website, but you know that there will be minors (people under 18 years old) actively using the site. And on top of this, you’re too cheap to pay for image hosting for thousands of files. So what do you do?!

You generate the images at runtime, or at least that’s what we did.

To do this, we started with a template. Our template was the body of a rubber duck and we made it a set size- 200x200.

From there, we started adding layers onto the duck: hats, beaks, wings, etc. These layers would be interchangeable by the computer.

And then finally, we set up a simple endpoint that could mix and match these different layers together. If you want to see the API in action, you can check out the website here.

If you want to check out the code for the project, it’s all publicly available here. Make sure to star the repository!