# Essentials

# Introduction

Vue.js Events is an effort to centralize all local community efforts for Vue.js and to help continue foster and nurture the amazing community we already have. And while we have "meetup" in our name and use it often, this effort is not limited to Meetup.com events. With that said, welcome and be sure to reach out if you have any questions or feedback!

# Getting Started

That's exciting news! We are glad to see so many people who are enthusiastic about establishing local communities to help Vue enthusiasts and newcomers alike. Although it might seem complicated, starting your own Vue.js group can be done in five simple steps!

For those who want a quick pep talk before diving into the guide, check out the following lightning talk for VueConf 2018.

# 1. Name Your Group

While naming things is often one of the most agonizing parts of starting any project, luckily it's pretty easy for creating a technology oriented meetup.

Here are some options:

• Vue + YourCity
• VueJS + YourCity
• YourCity + Vue
• YourCity + VueJS

Some examples include:

• VueDC
• Vue.js Paris
• Vue JS Singapore
• Melbourne Vue.js Meetup
• VueJS Amsterdam

Check out what other meetups named themselves if you need more inspiration!

# 2. Grab All The Branding Things!

Now that you've decided on a name, it's time to grab all the branding things. When it comes to getting the word out about your group and the meetups, there's no substitute for having the proper social media tools. There are a few major ones you want to get to make your life easier:

• Google (for email and potential YouTube possibilities)
• Twitter
• Discord (for a dedicated chat channel for your community)

Some other ones you that are nice to have, but not as critical:

• Event Registration (i.e., Meetup / Nvite)
• Domain Name
• Instagram

# 3. Getting a Venue and Set a Date!

Contrary to popular opinion, you don't need a lineup of speakers in order to start a meetup. The most important thing you actually need is a venue.

Some common places that meetups can be held in include:

• Your employer's workspace
• Community centers
• Co-working spaces
• College classrooms
• Local companies who are interested in hosting tech meetups

# 4. Meetup Logistics

These are some things that you should consider when planning your meetup:

• Does it have a projector? If not, find a TV or spare monitor that could proxy as a projector. And if that's not even an option, upload your slides and let people follow along.
• Does it have wifi?
• Does it have easily accessible outlets for people to plug their laptops in during workshops?
• How accessible is it (i.e., public transportation, parking, etc.)?

And as far as food goes, here are some general guidelines:

• Since Meetup events are free, you should account for 30 to 40% of the RSVPs
• Unless you are serving food that merits a meal (like pizza), please do not say "Free food and drinks will be served" because attendees will be expecting something much heartier than some chips and cookies

# 5. Spread the Word!

With your newly powers of social media, make sure to send out your event details on all the social media things! Hashtag #VueJS and #VueJSMeetups to maximize your visibility and we'll make sure to help spread the word!

# Organizers' Handbook

# Code of Conduct

When it comes down to it, every Vue.js meetup needs to have a Code of Conduct. There's no reason not to have one. And for those thinking that it's really hard to write one. We have a template all ready to go.

'Nuff said.

# Planning a Meetup

There are two primary things you have to consider as an organizer when planning a meetup.

1. Location
2. Agenda

Everything else is just extra credit.

# Location

This is the single most important item any organizer needs to secure with absolute certainty. The worst thing you can do as an organizer is have people voluntarily spend their free time to come to your event and find that the location has been changed.

# Agenda

The biggest misconception about meetup events is that you always need a speaker. Nothing could be further from the truth. What you actually need is a group of people with an interest in Vue.js and a basic agenda so people know why they are coming.

So when you are planning your next event, consider the following options:

• Workshops: This can take many different formats, but the basic idea is to have someone lead the event and build something with the audience.
• CodeLabs: This is where everyone gathers to work on Vue.js projects. People can help one another or pair with one another. And if they don't have a project, they can work on tutorials instead!
• Show & Tell: While many people are terrified at being asked to speak on a certain topic, talking about a project or small demo they worked on is much easier. This was inspired by CodePen meetups and has been a great avenue for giving people a taste of speaking.
• Lightning Talks: If you can't get a single speaker, consider this format to reduce the pressure on potential speakers. The only risk to this format is that lightning talk speakers are more likely to back out at the last minute, so be prepared for that.

# Food and Drinks

Basic guidance for food and drinks is the following:

1. If you are only planning on serving snacks (i.e., chips, cookies, etc), use the phrase "snacks and drinks will be provided" instead of "food and drinks will be provided". You will disappoint people expecting dinner if you say the wrong phrase.

2. If you plan on serving alcohol, please be sensitive to those who do not drink alcohol and have alternatives.

# Best Practices

# Provide a basic schedule of your event

When potential attendees are deciding whether to attend your event, simply having a start and end time will only be so helpful to them. So help them out with a simple outline of what they can expect from the evening.

Here's an example from a lightning talk event:

6:30PM - 7:00PM: Food & Drinks
7:00PM - 7:15PM: TypeScript Intro
7:20PM - 7:35PM: TypeScript in VueJS
7:40PM - 7:55PM: VueJS Browser Extension
8:00PM - 8:20PM: Show & Tell
8:20PM - 9:00PM: Discussion & Networking

# Give people time to get to your event

If your event is on a weekday, remember that people often don't get off of work till 5:30PM, so when you're scheduling your event, do not start it any earlier than 6:30PM if you want optimal attendance.

# Things happen, so help out your attendees in advance

We highly recommend that you give attendees 30 minutes of flex time as things like traffic and late meetings inevitably happen. So when scheduling your agenda, let people know when the "doors will open" and when the official event starts.

# The Pac-Man rule

The Pac-Man Rule is a term that describes when you are standing with a group of people, make room for another person to join the circle. When that person joins the circle, to continuously leave room for another, in a shape of a Pac-Man's mouth.

This is a best practice method if you want to keep your event inclusive. This helps attendees, especially newcomers feel more welcomed and included.

# Visual / Banner

Try to have a visual/banner that's directly related to specific meetup edition, with the list of speakers, date etc.

If people just see "Vuejs X Meetup", they don't click on it. With a specific visual/banner even those who don't click will know what you're organizing.

# Event Graphics

These are fairly generic event graphics that can be reused. They are all at the dimensions used by Meetup.com (example).

Due to most file sizes being too large to host on GitHub, we have stored them in a shared Google Drive:

• Event Graphics and Source Files (Google Drive)

The source files are all made in Photopea (free, browser-based alternative to Photoshop). Everything is on layers and text can be changed to say whatever you want for your event.

# How to Encourage New People to Speak

It's a common misconception that speakers need to take up the entire meetup or have entire talks planned out. This can make it people hesitant to volunteer.

So here are some strategies to ease people's mind:

1. Speak with them. If they know that they only have to do part of a talk, it make the idea much more approachable.

2. Help them craft a topic. What people often don't understand is that they have a lot of topics they could talk about. Whether it's case studies, or personal projects, work with them to come up with a topic so they don't feel the burden of doing it all by themselves.

# Speakers' Handbook

Let's face it, speaking is terrifying. Don't you worry though, this whole section is dedicated to helping you take that first step.

# Potential Speaker Topics

It can be surprisingly difficult to come up with topics to talk about, so we have a list here to help inspire you.

• Introduction to Vue.js
• Managing Styles in Vue.js
• Animation in Vue.js
• State Management in Vue.js
• Testing in Vue.js
• Component Architecture in Vue.js
• Server Side Rendering in the Vue.js Ecosystem
• How to Use Vue.js with a CMS Like WordPress

# But It's Been Done Before

One of the biggest misconceptions in the world of speaking (and writing) is that if someone has talked about X topic, this means that you can't talk (or write) about it. Nothing could be further from the truth. The only exception to this is if you plagarize their entire talk.

At the end of the day, the odds are in your favor that you have a unique take on the topic that sets you apart. In addition, when it comes to speaking at meetups, a majority of attendees often have not done the research you've done on X topic. So while the insecure side of you is afraid that they will be bored, you're going to do great.

# Know Your Audience—You're There for Them.

Your audience might not have spent anytime on your topic, but they are intelligent. They just don't have your particular passions. Often they will be a mixture of novices and advanced developers/programmers. Your goal should be to introduce a topic or solution and get people curious about it—not to become experts.

# Why Should Anyone Care?

How is your topic relevant to your audience's work? Will it speed up development time? Or will it improve their code and reduce bugs? Explain upfront how individuals can benefit from your topic. They are not there to see how knowledgable you are but to learn something interesting that could possible make their work better.

# Outline Your Talk

Resist the urge to start developing slides or demo code. Create an outline of your talk first. What are the main take aways you want your audience to have? For an hour talk a good rule of thumb is to stick to 3 or less main points. It will be impossible to turn your audience into specialists in 1 hour so don't try.

You want individuals to walk away from your talk remembering the main points. Telling stories is a good way to help a message stick with your audience. Using imagery for conceptual ideas will also help your audience better understand and remember. Identify the best way to convey your points? Slides, demo code, or live coding?

# Slides

Slides can be a good way to convey information. When creating slides the most important thing to remember is that they are for your audience, not you. Rather than reading a slide, talk about the topics on a slide. It's okay to have notes on paper or a device that is just for your eyes.

More slides are better than less with too much content. Packing too much information on an individual slide make it hard to follow, apart from the small font size. Remember your goal is to share some knowledge and inspire, not turn your audience in to experts. Consider what is the point of each slide? Does it support the main points of your talk?

# Showing Code

When introducing code on a slide, show snippets rather than large blocks of code. Focus on the most important aspects rather than showing the complete code. You can use ellipses to represent code that isn't important to the point.

Article.vue
<template>
  ...
  <h1 :class="$style.headline">
    {{ article.title }}
  </h1>
  ...
</template>

You can also use animation to introduce code and give visual cues on how chunks are connected like in this example from a Vue DC Meetup. Keynote was use to create the slides but Power Point and Google Slides also have some animation features. Using slides in this manner does require you to know your talk fairly well.

# Live Coding

It is natural in a development talk to want to show code but think twice before going down the live coding route. Do you really need to live code to for your audience to understand?

Live coding can be tricky to pull off—it is prone to mistakes and a lot of time can be spent troubleshooting. You can minimize the difficulty of live coding by having branches setup for different stages of your code. Another technique is to have your code written but commented out so that you just need to uncomment code as you go along.

When live coding, don't walk through your code line by line—just focus on the main points. You can use code comments to explain nuances or difficulties and provide the code in a GitHub repo. Don't forget to zoom in on your code so audience members farther away can see what your are talking about.

If you decided that live coding is the only way to go then practice several times to work out the kinks.

# Live Coding with Video

Rather than live coding on the fly, consider recording a video. You'll need a screen recorder and video editing software but it will make for a more efficient presentation. Gregg Pollack is a master at using video for live coding so watch any talk he has given and you will have a good idea of how it should be done. At a minimum, you should consider recording a live demo of the working product for efficiency sake. However, bare in mind that video production can be incredibly time intensive if you aren't familiar with the techniques involved.

# General Tips

• It's normal to be nervous so kudos to you for stepping up and talking.
• It's easy to underestimates how much time your talk will take so it is a good idea to create a talk that is a bit shorter than your allocated time.
• Talk louder than you think you need to, unless you have a mic.
• Zoom in your screen when view a website or live coding.
• Try to gauge your audiences reaction and adjust. This is tough to do but can be learned over time.
• Practice. Practice doesn't make perfect but the better you know your talk the less nervous you are likely to be.
• Most importantly be yourself!

# Resources

It's a good practice to provide your audience a way to access any slides and demo code from your talk. For your slides you can use a online slidedeck host or add a pdf to your demo code if you are providing a full repo. If you can provide a screen recording with audio that is a nice plus.

# Slidedecks Hosting

• Google Slides
• SlideShare
• Speaker Deck

# Code Hosting

• Bitbucket
• CodePen
• CodeSandbox
• GitHub
• JSFiddle

# Screen Recording Options

• Loom (Windows compatible, free for hosting up to 25 videos per account)
• CloudApp
• Quicktime (OSX only)
• ScreenFlow
• OBS Though more technical than the other options, it is fully cross-platform, free, and open source

# Video Hosting

• YouTube

# Streaming your event

It's a common request for meetups to offer a live stream or recording of the event for others to watch that couldn't attend in person.

# Services

There are many services that allow you to stream your broadcast for free. Here are some popular options:

1. Twitch - Twitch is the most popular streaming service
2. YouTube Live - YouTube is the most popular site for hosting videos, but also offers live streaming

# Software

Not all laptops are powerful enough to stream high quality video. You should set aside time to install streaming software and test out your stream.

1. Stream Labs - This is probably the easiest software to get started with. Sometimes called "Stream Labs OBS" or "SLOBS".
2. OBS Studio - This is the open source software Stream Labs is built on top of. On some machines it works better.

# Hardware

1. A laptop and some good internet - That's all you really need.
2. A lavalier microphone - These can be attached to your speaker for better audio in the stream. Mic'ing your speaker will make a huge difference in stream quality.
3. SlingStudio - For those wanting to spend a little money, this is a simplified set up to connect multiple input devices, save a local high quality version of the stream, while also broadcasting. Important note: This hardware is compatible with iOS and OSX.

# Using other people's laptops

Sometimes a speaker needs to use their own laptop. Since setting up streaming software and testing that it works takes time, here are some options.

• Host them on Twitch
  • Ask them to download OBS or Stream Labs (SLOBS) in advance and set up a Twitch account to stream from.
  • Let them stream to their own account, but have your Twitch account "Host" theirs
• Use a video splitter
  • Take their laptop video output and send it to a video splitter so that the video goes to a projector, and to a different computer/device that will stream the video.
  • SlingStudio is a good option for this, but there are much less expensive solutions also

# Tips

• Always verify the stream is up and the video/audio are working. You don't want to get to the end of the presentation to find out you didn't have audio the entire time.