If you’re working with the Vue CLI and you’re trying to import global JS/CSS libraries, you’re not alone. Some solutions will tell you to just add the package with a require statement or an @import statement. That’s fine but there is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them. Instead, let’s use an ES6 ‘import’ statement.

…[T]here is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them.

What We Will Be Importing

We will be importing Bulma, the up-and-coming Flexbox CSS framework. I won’t get into too much detail about it here but it’s all based on Flexbox. It’s very easy to pick up and learn and requires less markup than Bootstrap.

What We Will Be Doing

For this, we will be creating an alias for our Bulma dependency. This will be very familiar to you if you read my other post about creating an alias for a React dependency.

For this, I’m assuming that you already have the Vue CLI installed. If not, it’s easy to install. Just run npm install -g vue-cli, vue init webpack my-project, and follow the prompts.

Creating the Alias

First, to add the dependency let’s use run the follow NPM command:

npm install bulma --save

After that is done, let’s dive into our build/webpack.dev.conf.js file and paste the following code right above the module object.

resolve: {
    extensions: ['.css'],
    alias: {
      'bulma': resolve('node_modules/bulma/css/bulma.css'),
    }
}

NOTE: If you want to use the SCSS file, there are additional steps you should take prior to this article.

Now that your alias is created, let’s import it into our src/main.js file. Importing the dependency here will allow it to be used across the entire application.

import bulma from 'bulma';

That’s it! Really.

Granted, you could just add the relative path to Bulma but this is much cleaner and easier to read. Plus, you now know how to create an alias’ in Webpack for Vue!

Thanks for reading. If this helped you at all, please share and follow me on Twitter!

Originally published at daveberning.io on January 6, 2018.

Importing Global Libraries into Vue CLI (The Clean Way) was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Importing Packages Without An Alias

Let’s see how messy importing code without an alias is. Let’s imagine that our component (SomeComponent.jsx) is nested deep within our directory structure. I want to be able to access anotherComponent.jsx that is a few levels up…

import React, { Component } from 'react';
import AnotherComponent from './../../../../../components/anotherComponent/AnotherComponent';
import ProfileImage from './../../../../../../assets/profile.jpg';

class SomeComponent extends Component {
  render() {
    return (
      <div>
      	<img src={ProfileImage} alt="My profile image!" />
        <AnotherComponent />
      </div>
    );
  }
}

export default SomeComponent;

As you can see, the relative paths are ugly. But they’re also fragile. What if you update your directory structure? Physically moving a component up a level with all it’s dependencies, will break and ka-boom. Failed to compile…

Importing Packages With An Alias

Let’s look at packages with an alias. This is the end goal.

import React, { Component } from 'react';
import AnotherComponent from '@/components/anotherComponent/AnotherComponent';
import ProfileImage from '@/assets/profile.jpg';

class SomeComponent extends Component {
  render() {
    return (
      <div>
      	<img src={ProfileImage} alt="My profile image!" />
        <AnotherComponent />
      </div>
    );
  }
}

export default SomeComponent;

See, isn’t that a lot better? Our code is cleaner and since we are using absolute paths, our code isn’t as fragile!

That’s Awesome But How Do I Do That?

First, I am assuming that you are using create-react-app, React’s CLI. Second, you will need to open up your config/webpack.config.dev.js file.

Once opened…

1. Run: npm run eject
2. Find the ‘alias’ object in your dev config file
3. Add the following code…
4. ’@’: path.resolve(‘src’)

Your alias object should look something like this…

alias: { '@': path.resolve('src'), 'react-native': 'react-native-web' }

I also like to add alias’ to some commonly used node_modules as well. For my projects, I usually create an alias for Bulma, the Flexbox CSS framework. Note: your alias doesn’t have to start with or a ‘@’; it be can anything you want.

'bulma': path.resolve('node_modules/bulma/css/bulma.css')

So, in my components, I can just import it like any other package, stylesheet, image, or component.

import Bulma from 'bulma';

If this helped you at all, please share and follow me on Twitter!

Originally published at daveberning.io on December 29, 2017.

Creating Alias’ For Package Imports in React was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

So…if you’ve worked in field for a few years you’ll know that blogs can sometimes be overly verbose when you just want them to be simple. Which, can be good, but if you’re looking for a brief explanation for something, this can become frustrating. So, here is my attempt at giving you what you may be looking for upon your Google search. For this article, I assume you know how to create a Firebase account, a Firebase project, and have a basic idea of what a REST service is.

Setting Up a REST Service With Firebase

First, let’s set up a REST service with Firebase. After all, without a REST service you cannot get data. You will need to create an account if you haven’t already. For small teams and projects, it’s free.

Once you sign in, you’ll see you console dashboard, go ahead and create a project if you haven’t already.

Authentication

You don’t want just anyone to access every bit of data if they have no need to. So we will need to restrict the data that comes through to a specific user. To make things easier, I’m only going to go over Firebase for Web and “Email/Password” authentication.

Go to Authentication > Sign-in Method and make sure that “Email/Password” is enabled, if it isn’t by default. Next, you will want to go to Users and click on “Create User”. From here, you will add the credentials that you want to use then you will see a generated User UID (this ID is important for later).

Now that we have our sign-in method and user created, let modify the authentication rules. The current snippet that Firebase provides allows any user that is logged in (authenticated) to see all the data; even if it doesn’t pertain to them. Obviously, we don’t want that. So we will need to modify this to allow only the user that is logged in, to only see their own data and no one else’s.

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

After you paste the above code in, click on “Publish”. We now have everything we need for a basic REST service with Firebase. Now, let’s add some data to a REST endpoint so we can see data coming back when we call it.

Adding Faux Data to a User’s REST Endpoint

Let’s add some faux data. The easiest way to do this is to just write some JSON or copy the snippet below into a .json file and import it. First, you will need to create your endpoints. For naming conventions, where going to use…

https://PROJECT-NAME.firebaseio.com/users/{uid}

Note: You can copy your UID on the Authentication > Users screen and copying the value under UID.

[
  {
    "name": "Billie Joe Armstrong",
    "birthYear": 1972,
    "band": "Green Day"
  }
]

Your should see something like the screenshot below. At this point, we have our Firebase account ready and our REST service with faux data set up. Now, let’s grab some data with Axios and see it returned in the console so we can use it.

Fetching Data with Axios and the GET Method

Now we finally get to the point of this whole article. I eventually figured this out myself but only after reading a lot of post that didn’t really work for me.

In order for us to get the data for the specific user, we will need to leverage the Firebase API and grab the data per the UID.

Checking If a Firebase User is Logged In

This code snippet below is what you will need to add to your application to check if a user is logged in. If so, the firebase.auth() method will return a user object with user information including the uid.

firebase.auth().onAuthStateChanged(function (user) {
  if (user) {
    // Your code here
  }
})

GET With Axios

To get data from Firebase with Axios you will need two things, 1) user’s UID and 2) a database secret.

As stated before, the user’s UID is returned with the user object in the Firebase auth() function. Simply concatenate user.uid in your REST call. For the database secret, you will need to generate one.

In order to generate one, you will need to go to Settings (top left by Overview) > Service Accounts > Database Secrets. Simply click on the “Add Secret” button and copy the secret. It’s vert important that you never share your secret on a public repo or anywhere else online. It’s a secret for a reason.

Now, we finally have everything we need. Let’s delve into your code now and get a 200 response with actual data that you can use in your application.

axios.get('https://PROJECT-NAME.firebaseio.com/users/' + user.uid + '.json?auth=DATABASE-SECRET')
.then((response) => {
  console.log(response)
});

Copying that Axios get method with your credentials should result in a 200 response. Woo! I hope this helps in getting a better understanding of Firebase for your web application.

If you enjoyed this post or if it helped you in any way, please click the clap button to support the post. Thanks!

Originally published at daveberning.io on August 27, 2017.

Setting Up and Getting REST Service Data With Firebase and Axios was originally published in Parsec Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Start Marketing Yourself as a Web Developer

“What?! But I barely know how to code!” Yeah, I know. This may seem a bit abnormal if you’re just starting out but it’s true, all of it; you’re a web developer 🎉! One of the most productive ways to get the development ball rolling is networking and marketing yourself as web developer.

I cannot stress this enough; networking is crucial to your success. Web development is a growing industry every single year. Everyone and their mother knows someone that needs a website, a progressive web application, or a mobile application.

Anyone Can Be a Contact

Anyone can be a contact and a part of your network. Make business cards and carry them around. You’ll never know if a random officer of a courthouse is need of a website or knows someone in the industry….

Which I have to say, actually happend to me. My wife works at our county’s courthouse and was on her way to night court. My wife and the officer that was driving got caught up and a conversation and it turns out, his wife’s company desperately needed a website. My wife had my business cards handy and within a day, the company contacted me. So, now I have an exciting freelance job and an additional person in my network.

Michael Hauge perfectly defines “networking” in his book, Writing Screenplays That Sell as…“simply the process of meeting two people and having them each introduce you to two people who in turn each introduce you to two more.”

Every single job I’ve had in the industry has been the result of networking.

2. Start With the Basics

I recognize the cliché in this cliché post but again, it’s true. Start off with the basics — HTML and CSS. Every website on the World Wide Web contains some degree of HTML and CSS. These are the two most important building blocks of any website. There’s also JavaScript of course but we’ll get to that later.

It’s important to know that without a good solid foundation in HTML and CSS, your website will become fragile, harder to maintain, and will not age gracefully.

As HTML and CSS practices evolve, you will still need to code good HTML and CSS that is standard’s compliment and meaningful to the website that you’re working on. You should also know what clean and productive code looks like. You don’t want to pass your website along to another developer and have them say, “Wow…this code is awful. I need to refactor this entire website first!”

In short, the more HTML and CSS you know, the better.

3. Vanilla Script, Script, Baby!

If I were to start my career over again, I would not spend much time learning jQuery. Instead, I would learn vanilla JavaScript from the start. jQuery can become a crutch for many and admittedly, it was to me. It was very easy to just grab pre-written code and add it to my website. But when I took a step back, I never really learned how to program anything for the web and that is a problem. To be fair, when I started back in 2011, jQuery was very much relevant and modern JavaScript frameworks like Vue and React didn’t really take off yet.

jQuery can become a crutch for many and admittedly, it was to me. It was very easy to just grab pre-written code and add it to my website. But when I took a step back, I never really learned how to program anything for the web and that’s a problem.

Don’t get me wrong, plugins and libraries are great if they add something useful and common to your website like a carousel for example. You shouldn’t have to rewrite a carousel each time but jQuery shouldn’t be used for everything like basic DOM manipulation. You can do something simple like adding a class to a <div> on click in vanilla without requiring an outdated dependency.

// jQuery - Add a class
$('.some-div').click(function() {
    $(this).addClass('new-class');
});

// Vanilla JavaScript - Add a class
var someDiv = document.getElementByClassName('some-div');
someDiv.onclick = function () {
    this.classList.add('new-class');
};

If You Didn’t Know

Vanilla JS is just a nickname given to raw JavaScript. It started out a joke but it kind of stuck.

• VanillaJS === JavaScript
• jQuery !== JavaScript

4. Find Your “Hello World!”

I won’t delve too deep into this because I’ve already covered it. But the general idea is to find your own “Hello World!” tutorial. Following tutorials is a great way to get a general feel of a language or framework but these tutorials can become rehearsed, stale, and redundant.

Instead of echoing out “Hello World!” to a screen, how about creating something that’s meaningful to you and portfolio worthy? For me, I needed to learn AngularJS for work. So, in order to learn it, I created a small “Periodic Table of Elements” application that let’s the user navigate between the elements and animate them.

This project kept me interested enough and pushed me to get past to basics and gradually move towards more advanced techniques. After the project was done, I was all caught up with AngularJS and had a pretty cool portfolio piece to share.

Use this general idea as your own tutorial for other languages and frameworks that you’ll need to learn in the future.

5. Start Collaborating With Other Developers

One of the best ways to learn is by doing. Find a developer or a small group of developers and start working on a project. Each one of you may be at a different skill level and everyone has different experiences. Leverage each others skills and experience to better your own.

Some of the best times I’ve had while working was having “Coding Saturdays” and a small group of developers. All we did was just eat pizza, drink beer, and code; it was a blast and very beneficial. My very first Wordpress website was completed over a few, “Coding Saturdays”. In that process, I was able to learn PHP and Wordpress from a more experienced developer at the time.

6. BONUS: Get Engaged in the Online Development Community

Okay, so I lied there’s not five things you should be doing, there are six. I just thought this one (like the others) was important to “@ mention” (🥁). The web development community is rich and full of smart and helpful people. Smart and helpful people that want to share code, help solve problems, and get their name out there just like you.

Some of the ways that developers get involved is by posting solutions on Stack Overflow, contributing to GitHub repos, and engaging with others on Twitter.

Who You Should Follow:

• Chris Coyier
• Sarah Drasner
• David Walsh
• Dave Rupert
• Paul Irish
• Dave Berning 😉

What You Should Read:

• CSS Tricks
• David Walsh’s Blog
• Alligator.io
• Scotch.io

What You Should Listen To:

• Shop Talk Show
• The Big Web Show
• The Changelog
• JavaScript Jabber

Originally published at daveberning.io on August 19, 2017.

Let’s create a reusable component and use it as an XML tag.

App.vue

<template>
  <custom-name></custom-name>
</template>

<script>
  import ComponentName from './components/ComponentName'

  export default {
    name: 'app'
    components: {
      'custom-name': ComponentName
    }
  }
</script>

./components/ComponentName.vue

<template>
  <p>Hello, Medium</p>
</template>

<styles>
  /* CSS Here */
</styles>

<script>
  // JS Here
</script>

It’s pretty simple actually. Just create your component, import it like any other Vue component and reference in your view.

Originally published at daveberning.io on June 24, 2017.

Learning a new programming language, a new framework, and/or a new skill is a daunting task. As a web developer trying to keep up with the field, it can be stressful. Technologies seem to come and go every six months to a year; there’s always the next up-and-coming framework around the corner.

If you’re coming from a strictly HTML/CSS background like me, taking the next step into the JavaScript world can be extremely intimidating. I mean, I’ve lived in this “jQuery comfort zone” for many years. A few years ago, as a young and naive developer, I thought all I ever needed was jQuery; boy was I wrong. I noticed all these neat frameworks and what they can do but never thought that I was skillful enough to use them. I would take a brief gander at some examples and was immediately intimidated by them and continued doing what I did best.

It wasn’t until I started my latest job that I had to get serious about PWA’s and JavaScript frameworks. I started this new position creating and maintaining AngularJS applications for a popular custom home builder. I enjoy working there but there was a problem: I had no idea what I was doing. In order to get caught up to speed I had no choice but to invest some time outside of work and learn AngularJS (the framework they used).

My Beef With The “Hello World!” Tutorial

I’ve spent lots of hours watching tutorial videos on Lynda.com and other sites. They’re great resources but all their courses have one thing in common — Hello World!

Don’t get me wrong, the “Hello World!” example is great when learning a new programming language but everything starts off with that. In my opinion, if you’ve been developing for a few years, those “Hello World” tutorials do you no good. And by that I mean, it can become rehearsed and dull; it shouldn’t be dull, it should be exciting!

In my opinion, if you’ve been developing for a few years, those “Hello World” tutorials do you no good. And by that I mean, it can become rehearsed and dull; it shouldn’t be dull, it should be exciting!

Find Your Own “Hello World”

Let’s find your own “Hello World” app. I tend to use my “Periodic Table of Elements” app as my tutorial app for each framework I’m learning. This also helps me retain information by comparing one framework to another. So let’s get started.

Step 1: Pick a Topic

Instead of learning AngularJS the “traditional way”, I decided to create something about a topic that interests me. This is the most important part of this approach. Without an interesting topic to work with, you might as well ignore this entire article. My friend Ryan is currently learning HTML and CSS. All of his learning exercises are related to Jeep’s which keeps him motivated.

My wife, our rocket scientist friend (really), and I all recently traveled to Washington D.C. for the March for Science. I love science and everything about it. So naturally that was my topic. Anyway, my point is that I’m passionate about science so for me, it was a no-brainer.

Step 2: Come Up With An App Idea

You have your topic and now it’s time to come up with an app idea. Try coming up with a brief list of ideas even if it’s been done before. Remember, this application doesn’t need to be the next big thing it just needs to be interesting enough for you to learn. Here are some of the ideas that I came up with for my science theme.

• Periodic Table of Elements Application (final choice)
• Animated Planets and Moons of the Solar System
• “You Weight on a Planet” Calculator App
• Planet Weather App

Step 3: Get to Work

You have your topic, you’ve fleshed out an idea, now it’s time to get to work! You can follow the “Hello World” tutorials if you want but by taking this new approach, you’re more likely to solve real world problems. Problems like needing to extract data from a JSON file or a service and process that information in a factory. This also helps your developing and troubleshooting skills.

Conclusion

By taking this approach I saved hours of time learning AngularJS. Not only was I able to learn a new framework fairly quickly, it was fun and I ended up with a pretty unique piece that I can add to my portfolio.

Do you have a topic that you’re interested in? If so, what is your app idea and which framework or language are you trying to learn? Respond below and help jump start an idea for another developer.

Originally published at daveberning.io on June 20, 2017.

For the past few years, I’ve seen a growing trend in the need for web applications. This has largely to do with the standardization of apps. It seems like every website has a mobile app companion in the AppStore and Marketplace these days. Unfortunately, it can be expensive to develop a companion app for your website. Each platform has their own language and SDK that you have to learn and manage. Fortunately however, there are web technologies like PhoneGap and React Native that allow web developers to create hybrid and native applications for iOS and Android.

Web Development Isn’t Limited to the Browser Anymore

Probably the most exciting thing about web development is that it isn’t just limited to the browser anymore. There plenty of web packagers like PhoneGap and frameworks like React Native that let web developers create native apps with HTML, CSS, and JavaScript. This is exciting because we can now develop apps without learning a new technology, making app development cheaper as these “hybrid” apps can be ported to multiple operating systems.

I am currently working on a web app that lets market managers sit down with clients to create a custom home. The app is great and is currently only supported for the desktop. I would eventually like to see this ported to mobile devices to utilize device hardware for a better user experience.

It’s an Exciting Time For Web Development

It’s an exciting time to be a web developer. With each day, more features are adopted by browsers that let you do some exciting things like CSS3 keyframes and animations. The field has grown tremendously over the past few years. JavaScript has grown to be a flexible full-stack language that performs well on both the front and back-end with NodeJS. There is something for everybody and there is always room for growth as a developer.

To learn more about web applications and technologies, checkout Treehouse.

Disclaimer: The views expressed on this post are mine and do not necessarily reflect the views of The Drees Company.

Originally published at daveberning.io on December 24, 2016.

I recently started working with these frameworks in web applications a few months back. I hope this comparison is useful to those eager to step outside their comfort zone but not sure where to start.

My Past Experience With Frameworks

Just so you understand where I am coming from, I started working on web applications using AngularJS (Angular 1). When I started my current job, my employer was using AngularJS for their modern web apps. So, I didn’t have much of a choice in choosing a framework initially.

A lot of my time outside of work was spent researching and getting caught up with AngularJS. So at the end of the day, I become an AngularJS developer. However, there are many others that I wanted evaluate before just committing to what I know; especially for freelance projects. With the recent release of Angular (Angular 2), I thought this was a great opportunity to reevaluate my primary framework of choice. More on that specifically in a bit.

With the recent release of Angular (Angular 2), I thought this was a great opportunity to reevaluate my primary framework of choice.

The Big Three: React, Angular, and Vue

The big three that have separated themselves from the rest of the pack are React, Angular, and Vue. React is a front-end library created by Facebook, Angular is a MVC framework created by Google, and Vue is a library created by Evan You. All three are great and all do similar things, but there’s a lot of differences between the three.

React by Facebook

As mentioned above, React is a UI library created by Facebook and Instagram in 2013. React was built by the Facebook team in order to overcome unique front-end obstacles. Some popular sites that use React include, Facebook, Instagram, CodeAcademy, and Airbnb, to name a few.

React utilizes a Virtual DOM which is what makes React so quick and popular. React does not directly modify the DOM. It instead modified a Virtual DOM that then evaluates what has changed, then updates the actual DOM. This is done so that the DOM doesn’t have to re-render each time a small or large change was made.

React utilizes a Virtual DOM which is what makes React so quick. React does not directly modify the DOM.

React also uses a component based model. Similar to web components, a component in React generally has HTML (as JSX), JS, and CSS all in one file or chunk of code. React components are generally written in a JS file. There is no traditional HTML file with a clear separation between the view and logic; each component is in one JS file.

Summarize

React is a great UI library that is easier to learn than Angular. There’s a lot that it can do for the view out of the box but that’s about it; it isn’t a fully fledged MVC framework.

With that said, it is extremely popular with over 67k starts on GitHub proving that. The open source community is very active and you should be able to find other plugins that makeup for what it lacks. Something that React has over it’s competitors is native mobile application support with React Native.

NOTE: Facebook recently announced React Fiber; a rewrite of React.

Angular by Google

Angular is a fully fledged front-end MVC framework created by Google in 2010. Like Facebook, Google created Angular to solve various problems that were not done easily at the time. For a few years, AngularJS (Angular 1) was the king of frameworks. It was overwhelmingly popular a few years ago but has since dropped in popularity and adoption rate over the past few years.

This drop (along with React’s component based approach) prompted Google to completely rewrite it’s already popular framework to…wait for it…Angular (Angular 2+). Despite sharing the same name, AngularJS and Angular are really two completely different frameworks. Honestly, Google should have rebranded Angular to something else and ditch AngularJS entirely.

NOTE: Angular 1 is referred to as AngularJS while Angular 2+ is referred to as just Angular.

AngularJS has things called scopes, factories, controllers, directives. Your view, controller and factory logic are clearly separated and data is traversed in a classic MVC like fashion. Or in AngularJS’ case, FVM (factory, view, controller).

Angular on the other hand is more component driven like it’s counter part, React. Angular was rewritten in this component mode to compete with React but tries to maintain it’s full framework status as before. The logic written for your Angular application is done using Typescript; a superset of JS created by Microsoft. Typescript resembles that of traditional back-end programming languages like Java. I could write another article on Typescript alone.

Summarize

Angular is a great, robust, and mature framework that is great for large scale applications. It's also great for native development as it’s described as “one framework” for mobile and desktop.

With that said, the popularity and reputation of Angular has dropped significantly over the last few years. Google has managed to lose a lot of developer’s trust during the rewrite. A lot of people are hesitant to move to Angular from AngularJS or move to React or Vue entirely; and for good reason.

Google has managed to lose a lot of developer’s trust during the rewrite. A lot of people are hesitant to move to Angular from AngularJS or move to React or Vue entirely; and for good reason.

All those companies that created applications in AngularJS are forced to either convert or move. Which is a shame because each one of those applications where “cutting edge” and now are outdated.

Google has said however, that they’ll continue to support AngularJS with security updates until 50% or more of applications are converted over to Angular. However, I personally do not see that happening. I don’t think it’ll take off like AngularJS did. The rewrite left a poor taste in many developer’s mouths.

Vue by Evan You

VueJS is a newcomer to the fight. It was created by ex-Google employee, Evan You. It’s the fastest growing framework out there and even surpassing React! It’s been around since 2015 and already as over 54k stars on GitHub!

Vue continues to push the framework competition forward with it’s recent release of version 2 (not a rewrite). Vue is progressive and “just makes sense”. The learning curve is shallow compared to React and Angular and the setup is easy with the official Vue CLI. It’s also gained a lot of momentum over the past year with sites like Grammerly using it.

Best of Both

Vue has been described as the perfect combination of React and Angular. Vue takes all the successful parts of each framework and then some.

Vue has the same component based approach as React, while clearly separating view and controller logic like Angular. Vue has a Virtual DOM and (with the help of third parties) performs CRUD operations like Angular, so it’s very scalable.

Vue has been described as the perfect combination of React and Angular. Vue has the component based approach as React, while clearly separating view and controller logic like Angular.

If you are coming from AngularJS, transitioning to Vue is much easier than if you were to switch to React. The best things from AngularJS like the ng-if, ng-repeat directives were brought over as v-if, v-repeat and so on.

Components are much easier to manage in Vue as well. Languages aren’t mushed together like React/JSX and components aren’t stretched across several files as is the case with AngularJS.

Simplified Vue Component

There’s more to it but your standard Component.vue file is similar to something like this.

<template>
  <p>Hello</p>
</template>

<style lang="sass" scoped>
  p {
    color: black;
  }
</style>

<script>
  // Javascript or Typescript
</script>

Summarize

In my experience, Vue is much simpler and easier to use. The development environment is much easier to setup compared to the other two, especially with their CLI. Vue is newer to the game with a fantastic open source community. It has surpassed React in popularity in the past year and the future continues to look bright.

The major downfall to Vue (which ultimately is preventing large companies from adopting it) is the lack of backing from a large company. React has Facebook and Angular has Google. Vue is managed by one person and a large open source community. The lack of a large corporation could be offsetting to some people; it was for me initially. However, I would argue that you should not steer away from it completely.

If you want to know more about Vue, I highly recommend Sarah Drasner’s CSS-Tricks series.

So, Which Framework Did I Choose?

If you follow me on Twitter you’ll know that I recently have been considering switching from AngularJS to a new framework. My co-worker and I had some reservations with Angular as a whole and wanted to reevaluate our options. This conversation at work really prompted me to write this article. As posted on Twitter, I said I would write and post about it and reveal the framework I decided on.

I already made my decision. I’ll write a blog post comparing the big three: #React #Angular and #Vue. I’ll also share why I went with _____.

— Dave Berning (@daveberning) May 26, 2017

So…after hours of research, setting up environments, and playing around with each…I decided to make the switch to Vue. Sorry, various Angular Twitter profiles that retweeted and liked my tweet.

If you enjoyed this article, please share and comment below. I want to hear what you think. Did I make the right decision? Respond below and let me know.

Originally published at daveberning.io on May 27, 2017.

I’m hosting Cincinnati’s first CodePen meet up! The meet up will start off with a classic “show and tell”, followed by a small workshop if needed, then to a general discussion about the field.

Any and all front-end web developers regardless of skill set and expertise are welcome! Let’s all get together, share pens, network, and talk shop. Please RSVP through Nvite below. The meetup will happen on Tuesday June 6 at Queen City Exchange from 6:00PM-8:00PM.

You can follow the event on Twitter @CodePenCIN and with the hashtag, #CodePenCIN. If you have any questions, please let me know. I hope to see you there!

Published at daveberning.io on May 3, 2017.

The past few weeks, I’ve had the urge to jump outside of my close circle of developer friends and see what other developers around town are doing. After all, meeting new developers and viewing their work not only makes you better, but keeps you up-to-date with the industry. Not to mention, you get to build your network up and get introduced to new business and employment opportunities!

I’ve been working a lot on CodePen lately and started exploring their site. They sponsor meetups across the world and provide free “swag” to members that show up! Cincinnati has never had a CodePen meetup so I’m here to change that. I’m in the process of getting a venue but in the meantime, rallying up support for it.

The CodePen meetup will generally start with members presenting or sharing pens they really like, talk about what problems they’ve overcome, why they decided to write the pen, and what they got out of it. Then segue into a front-end workshop (if needed) or a general discussion about the industry.

If you’re in the Cincinnati/Northern Kentucky Area, please follow the event on Twitter @CodePenCIN and use the #CodePenCIN hashtag across social media.

Any details about the upcoming event will be posted on Twitter and my blog.