DEV Community: Brayden W ⚡️

Finished my NextJS tailwindcss portfolio!! 💎

Brayden W ⚡️ — Sat, 23 Jul 2022 17:27:57 +0000

Hey hey hey! Over the past few months I’ve spent some of my spare time building up my new portfolio website!

I built it using React, NextJS, and TailwindCSS. (Pure CSS for the animations)

I had a really fun time building and designing it and I plan to add a blog and other features too.

View it live at https://braydentw.io
It’s open sourced!! https://github.com/BraydenTW/braydentw.io

I built a NextJS/Tailwind portfolio template for you to use!

Brayden W ⚡️ — Tue, 11 Jan 2022 02:20:19 +0000

Hey hey hey Dev community!

It's been a while since I posted about a new open source project! I'm here to announce that I'm going to start building some open-source landing page/website templates from here and on into the future!

Obsidian. It's a slick and speedy portfolio template to showcase your projects and skills built on the awesome stack of NextJS and TailwindCSS.

Live demo: https://obsidian-portfolio.vercel.app
Github repo: https://github.com/braydentw/obsidian

If you have any feedback or any suggestions for future templates, I'd love to hear them! Let me know in the comments below.

Thanks! Have an awesome Monday.

Learning Rust 🦀 and making a Magic 8 Ball program!

Brayden W ⚡️ — Sat, 03 Apr 2021 03:03:35 +0000

Over the past couple of weeks, I've been wanting to expand my knowledge and to become more valuable as a developer.

Well, I'm pretty decent at Frontend already... I guess I should try out the backend of things!

After asking my friends for advice and for looking on different online forums, I've decided to go with Rust! 🦀

Why did I choose it?

High performance!
Low memory consumption
It's not too hard to learn (Yes, I lied. I know a little Python too so I know what I'm getting into.)
Great for system-based ops
Nice-to-have for backend experience
I've always wanted to make an awesome CLI!

So... after a couple hours of learning the fundamentals of Rust, I created my first project!

A Magic 8 Ball program!

https://github.com/BraydenTW/8ball-rust

I would appreciate it if you gave the repo a ⭐ and some feedback in the comments below!

Thanks so much for your help. I can't wait to learn more!

Learned Python 🐍 basics in 24 hours and created my first game!

Brayden W ⚡️ — Wed, 27 Jan 2021 21:59:52 +0000

Yesterday, I watched the first couple hours of a Python Tutorial for Beginners - Full Course by CleverProgrammer.

It was super helpful to learning the basics and fundamentals of coding with Python.

I've learned many frontend languages and techoligies such as Javascript, HTML, CSS, React, Next, Gatsby, and so on...

However, up until this point I had never really divded into the huge ocean of backend development... so I decided to learn Python! 🐍

How did it go?

Pretty smoothly actually. Python is really simple to learn.

It has an easy-to-understand syntax and great documentation. It also didn't hurt that this wasn't the first language I've learned.

After a learning about sets, lists, dictionaries, variables, if/else, while loops, for loops, (and so many more 😉), I decided to make my first game.

I chose to recreate Hangman in the terminal.

Github source code ➡ https://github.com/BraydenTW/hangman-python

It was a great learning experience along the way.

I'd love to hear any feedback you have for my code style/process.

'til next time! 👋

💬 - What's the COOLEST Vim plugin?

Brayden W ⚡️ — Sat, 16 Jan 2021 23:53:05 +0000

Hello!

A while back I wrote a post asking for who knows Vim on Indiehackers

I got a lot of responses and useful advice.

Today I started to configure my .vimrc and wanted to open this question up to the community:

What are your favorite plugins for configuring Vim?

Thanks for your help. The ocean 🌊 of Vim plugins out there can be quite a lot to take in. I have found some essential plugins such as NerdTree and the palenight theme, but I was wondering what other great plugins were out there.

Feel free to share in the comments below ⬇

Developers. Choosing which language/framework/technology to learn is tough. I'm going to change that. 😉

Brayden W ⚡️ — Mon, 11 Jan 2021 01:56:15 +0000

Developers. 👋

We all know that feeling when we're about to learn something new. 😆

Then... you realize all the decisions you'll have to make in order to master it.

...yeah 😕

It makes you want say "Yikes". 😬

Well sure, there are some great roadmaps and "Complete Guide for 2021" posts out there to help, but they all have the same problem:

Too much information at once.

Especially for newbie developers, seeing all the steps, resources, and concepts one must learn "to be a developer in 2021" can be quite stressful. 🥵

Unfortunately, many developers go through with it.

But hey, after lots of hard work, they achieve what they set out to do. 🥳

But couldn't there be a better way?

To be completely honest with you, I'm not sure.

That's why for the past couple days I've been brainstorming an effective solution to this ongoing problem that every developer encounters.

Before I start, I want to clarify that I have searched relentlessly through ProductHunt, Indiehackers, and Google for something similar to this, and I have not found anything like what I'm about to propose.

Let me know if you think otherwise ;)

What's the solution? An interactive roadmap where developers can pace themselves, make informed decisions, and achieve their goals!

Wait, wait, wait. Brayden, didn't you say roadmaps throw too much information at once?

Yes, but this one is different. 😎

Instead of a website that just says:

...and the occasional "have fun"

The solution I've thought up is meant to slowly walk through the process, steps, and options at stake to the developer.

The goal here is to make the developer's experience calm and comfortable. 😌

Not worry-filled and stressful.

For example, if I want to master web development, the tool will ask me:

What prior knowledge do you have?

This way, the user doesn't have to re-learn anything they already know.

So I would probably cross off subjects such as HTML, CSS, Javascript, Bootstrap, and ES6.

Usually when a developer gets to this point, they have to pick a framework.

React, Vue, or Angular? 🤔

A typical question developers ask.

Well, in this tool, I will give everything someone would need to know about these frameworks. (again, without overwhelming them)

Stats such as:

Pros
Cons
Possible future paths
Popularity
etc..

Once they pick that path, they can always come back if the one they chose isn't a good fit for them.

Let's say they chose React, it would give them helpful resources on how to learn state management, components, CRUD, SSG, and so on.

Once, they reach the end, now they can really celebrate! 🎉

Sooo.... let's recap

The problem 😥: Being a developer and learning new languages/frameworks can be quite the handful. Developers might feel rushed with all this newness and make unwise decisions in the end.

Are there current solutions? 🤷‍♂️ : Yes, but they're not great. Roadmaps and huge posts have all the info, but don't deliver it in a simpler/non-stressful way.

What am I building to solve this problem?: 👇

An interactive roadmap with all the resources you'll need to be a developer in 2021. Developers can pace themselves, make informed decisions, and achieve their goals!

If anyone has feedback on this idea of mine, feel free to share it in the comments below.

Thanks for your help! 🤗

Originally posted on indiehackers.com

How do I add cool 3D objects/animations to my website? 🤩

Brayden W ⚡️ — Sat, 09 Jan 2021 00:14:02 +0000

I was wondering of the best way to add 3d objects/animations to my website. Does anyone know of simple tools/frameworks I can use?

It would be ideal if this would output plain HTML/CSS/JS.

Thanks for your help.

What obstacles are you facing with your Open Source project? 🥵

Brayden W ⚡️ — Thu, 07 Jan 2021 20:39:42 +0000

I’ve tried launching a couple small open source projects in my time and it has been tough. 😞

Hard to gain an audience. Hard to build a community. And many more.

Why is this?

Well, I’m not sure. There is obviously something in a developer’s path that blocks them from achieving their goals. 😒

Is there something that would make building/launching/growing your open-source project easier?

Let us know in the comments below so we can help you out! 😃

What stinks about programming? 😖

Brayden W ⚡️ — Tue, 05 Jan 2021 22:51:00 +0000

Hi, I’m Brayden.

A Frontend developer and freelancer. You might know me from BuildFaster.co (HTML template-selling site). If not, then it’s good to meet you! 👋

Anywho, for the past few months, I’ve taken a break from indiehacking after dropping BuildFaster. During this break, I’ve had the time to stop, breathe, and think of new ideas. I’ve also learned new technologies like NextJS and Firebase which I can implement in future projects. 🚧

So... what’s up?

Well, when I started BuildFaster, I wanted to make money. Not gonna lie, 😅 that was my goal. I didn’t think of the beginning problem thoroughly and instead jumped right to the solution. Because of that, I didn’t get onto the path I wanted originally.

This time, it’s going to be different.

I want to actually take the time to brainstorm a problem and make a solution that I can scale, grow and audience with, and monetize.

So I’m opening this question up to all the developers.

What’s your biggest struggle was a developer? 🥵

No profession is perfect 🌈 , so there are always some cons about what you like to do.

It can be an issue that already exists, or something you struggle with.

I greatly appreciate your help. Thanks! 😄

I made a simple CLI that generates a vanilla HTML project. What do you think?

Brayden W ⚡️ — Sat, 02 Jan 2021 16:02:41 +0000

Hey Dev community! 👋

Today I've been working hard on publishing a new NPM package.

Check it out! 👉 https://github.com/BraydenTW/create-html-boilerplate

Create HTML Boilerplate generates a vanilla HTML/CSS boilerplate for you in a flash! ⚡

To start a project, simply type in the following command into your terminal:

npx create-html-boilerplate myapp

Tada! ✨

Now you can code away!

But, why?

You might be asking, why would I want a boilerplate generator for a plain, vanilla project?

Well, as I started web development as a beginner a few years ago, making the folder structure and file imports were always time consuming for me. I already knew how to do it, why waste my time setting it up?

My brother has had this same issue and that's when the idea popped into my head. 🎉

I'm open to any feedback you have for my project. I'm planning on adding more config options, imports, and templates too. 😉

If you find this tool useful, I would appreciate a ⭐ on this repo.

Web Dev Beginner? Here’s how to setup your next HTML/CSS project in seconds. 🔥

Brayden W ⚡️ — Mon, 14 Dec 2020 16:25:03 +0000

The problem (before)

I remember when I started learning web development a few years ago how tough and annoying it was to setup a new project for my basic HTML/CSS project.

It’s so simple, why do I have to keep learning it?

The solution! 🎉

Back then, a tool like Create HTML Boilerplate would’ve defiantly helped. 👍

What is Create HTML Boilerplate? It’s a super easy-to-use CLI (Command Line Interface) for generating the base of your vanilla HTML/CSS project in just seconds.

Cool! How can I do that?

Start by opening a new project in your preferred text editor and type the following command into your terminal:

You can replace myapp with the name of your project.

npx create-html-boilerplate myapp

Lastly enter into your project folder by doing one last command:

cd myapp

Now you should be good to go and ready to code away! 😎

If you find this open-source project useful, please give it a ⭐️ on Github. I really appreciate it. 😊

If you need help/have any questions, feel free to email me or put them in the comments. ⬇️

Have a great week! 👋

How do I make a scrolling animation like this?

Brayden W ⚡️ — Sat, 12 Dec 2020 22:38:39 +0000

Earlier today I came across this cool design agency's website:

https://sunnyatsea.se/

The first thing I noticed was how if you scroll down just a bit, it will move to the next section. Kind of like a slideshow.

I remember hearing of a cool library/animation tool that helps you with this task but I can't find it anywhere.

Does anyone have an tips on how to replicate this? (or if you know the library that would be cool to 😅)

Thanks!!