DEV Community: Kaleb McKinney

Maybe transpiled(to JS) languages are good?

Kaleb McKinney — Thu, 09 Dec 2021 00:24:52 +0000

This may not be the most sensational topic these days, as front end webdev has largely moved to JS frameworks and/or TypeScript, but I think it's an interesting topic to explore. Why so? The heyday of these kinds of projects seemed to be about a decade ago. I think of this kind of like the same as what Node is, but in reverse.

Why is Node so popular?
Node gets a lot of support because it's JavaScript. It makes sense; front end devs who need to write a backend are familiar with JS, so if they can write their backend in JS too, there's no need to familiarize with another programming language. Similar to projects like Flutter, why write native code for every platform, when you could use one codebase (or programming language in this analogy)?

Now, I can write JavaScript reasonably well, but I'm more of a backend dev who also does front end stuff. So, I'm basically the ideal Node user, but in reverse. Wouldn't it be great, then, if I could use another programming language I already use and enjoy for front end projects? This is possible, of course, however support isn't great for most languages (including my beloved Dart since there's no framework to use anymore :/).

The advent of WebAssembly brought this concept back in a way. The idea that you could use any language for client-side projects is very appealing, but wasm isn't necessary for it to work. Transpiled languages are just as good (maybe better for most applications) since the outputted JS is almost always faster than if you had written the code in JavaScript yourself, and it just requires less work.

A future where it's just as easy or normal to use a programming language like Dart, Kotlin, Scala, .NET, etc., (and of course JS as well) isn't that hard to accomplish, or far away if it gets support. It would be fantastic for front end development to be as diverse as the backend (and the rest of the software sphere for the matter), not just because choice-which is great in itself-, but also it could bring in more people who are at the moment hesitant to try out the webdev world because they don't want to have to learn JavaScript.

So, there's my thoughts on the matter, it'd be nice to hear you have to say as well down in the discussion. See you there!

Be a software developer with an associate's degree?

Kaleb McKinney — Thu, 04 Jun 2020 00:13:15 +0000

While I'm still in high school, I'm looking ahead as to what I'm going to to.

Because of the TN Promise program, and some scholarships, I can get an associate's degree for just about free. Local community colleges offer an AAS Programming degree. Has anyone gone this route? How did it go? Would you recommend it? Also, if you're the one hiring, would you consider someone with an AAS?

First impressions with Alpine.js

Kaleb McKinney — Sun, 29 Mar 2020 00:44:42 +0000

If you can't get behind the big JavaScript frameworks or like using tools with a philosophy similar to Tailwind, then you may find interest in Alpine.js.

What is Apline.js?

Alpine.js is, as described on their GitHub repo, a rugged, minimal framework for composing JavaScript behavior in your markup. In other words, Apline offers reactive and declarative functionality of the big frameworks in a smaller package.

Alpine doesn't offer everything, however it offers the in-HTML features of the big frameworks. There is no built-in component engine like with Vue or Angular. There is no router. It's a minimalist framework.

Let's look at some code!

Alpine is heavily influenced by Vue, so if you know basic Vue.js, then Alpine will be immediately familiar to you.

Dropdown

Here's how you could implement a drop down menu with Alpine:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

Let's examine this to understand how this works.

In the div element, you'll notice the x-data attribute. The x-data attribute is similar to the data property in Vue. It takes a JavaScript object. x-data is available to all elements within the div. In this case, there is a property called open, which is set to false by default.

In the button you'll see the @click attribute. This works the same as in Vue. This can also be written as x-on:click. It's pretty simple, when the button is clicked, it will execute the expression given. So, when the button is clicked, it resets the value open from x-data to true.

Finally, in the ul, when have two attributes to cover. First, x-show. x-show receives an expression. In this case, it's just open. If open resolves to true, then it will show, if false, it won't. Second, @click.away (also written as x-on:click.away). Also very simple. If/when the mouse clicks outsude of the ul, it executes the expression. In this case, it sets open to false, in turn, closing the dropdown.

You'll notice that there is no JavaScript. That is because Alpine initializes itself.

Using JavaScript

For more complex tasks, we won't want to be writing our JavaScript in our HTML. So let's take a look at our previous example again:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

Instead of having everything in our HTML, we can move things into our JavaScript. For example, we can move our x-data into a function in a JavaScript file:

<div x-data="dropdownData()">
    <button @click="open()">Open Dropdown</button>

    <ul
        x-show="isOpen()"
        @click.away="close()"
    >
        Dropdown Body
    </ul>
</div>

function dropdownData(){
    return {
        open: false,
        open() { this.open = true },
        close() { this.open = false },
        isOpen() { return this.open === true }
    }
}

In this situation, it's not very practical, but you can see how it can be done.

Conclusion

Apline.js is a simple, useful JavaScript framework that gives you the basics. Just what you need, nothing you don't. For a large project, you would probably appreciate the extra utility of the big frameworks. But maybe all you want is a simple, no-nonsense, small framework for your project. That's where Alpine comes in.

If you want to read the docs for Alpine, head over to their GitHub repo.

JavaScript Frameworks: My Thoughts

Kaleb McKinney — Sat, 28 Dec 2019 02:55:20 +0000

JavaScript frameworks are all the rage these days, but an increasing number of developers, including myself, aren't so fond of them.

Why?

For me, it's because they add so much complexity for what I see as a minimal gain. Frameworks like React and Angular allow you to create reusable components in your web project, but at the same time, completely take over your front-end. This might not necessarily be a bad thing, it could be a good thing if that's the way you like to develop, but for me, I don't like it.

I'm not opposed to the idea of reusable components, I just think they should fit in to your project, not define it. This is where framework-agnostic web components come in. They can be used with any framework, or none at all.

In my opinion, that's the way it should be. I use a tool like Lit-Element to make web components that work regardless of what other tools I decide to use or not use.

That seems like a "dream situation" to me. I can still leverage web components while not having to use a full-featured framework if I don't want to. And if you feel differently about it, write your thoughts in the comments if you feel inclined, I'd like to see what you have to say!