Learn Egghead, Polymer and Svelte

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Tips and Tricks

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Polymer is a framework created at Google for building reusable web components.

We use HTML elements every day such as div, a, button, form, and table. All HTML elements provide some sort of API of attributes, properties, methods and events that we use to manipulate them. Generally, web elements are styled in a particular way by default, and also allow us to customize their styling with CSS.

Polymer allows you to build fully custom web elements of your own for more complex components composed of the building blocks you are used to with the standard set of HTML elements.

This course is an introduction to Polymer, and should get you started building your own customizable web elements that you can use on their own, or even with your favorite framework like Angular or React!

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements.

polymer

Creating Custom Web Elements with Polymer 2

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

Any extra information on the screen will easily distract the audience from the purpose of your lesson. Do your best to remove any extra notifications, UI, or other information that would take away from what you're teaching.

Remove Distractions

Any information you would want to put into an Intro or Outro belongs in the accompanying description, title, course page, etc. The lesson is only for showing the process. Talking about yourself, the lesson, or other lessons is a waste of time.

Avoid Intros and Outros

Tangents are opportunities for other lessons. When you find yourself drifting off-topic because you feel you _need_ to explain  some code you wrote, consider how that piece of code fits back into a "How do I?" question, then come up with a separate lesson to capture it.

Stay on Topic

Recording can be intimidating, so it's best to just hit the record button and start talking. Take it one thought at a time. Sit quietly, think about what you're going to say/type, then do it. If you mess, up, undo back to when you were quiet and try again. Once you get a good take, move on to the next thought. The ideal raw recording is a ton of bad takes and one good take for each thought. So when you get to the editing phase, you quickly clear out the bad takes and leave the good ones.

Record One Thought at a Time

Editing a raw lesson video is a very simple process. You simply watch your own lesson and edit out all the bad takes and dead space using the "Ripple Delete" command. You will be left with a nice, cut lesson ready to export and upload.

Edit with Ripple Delete

Video is a one-way form of communication, so user's don't have the chance to ask you to clarify or ask "Where does X fit in?" This places the burden on you to guide their eyes as you explain how all the little pieces of the code fit together. When your application has a "flow", "X triggers Y, Y triggers Z", make sure to "show the flow" by walking them through where each chunk of code fits. This involves a lot of mouse movement (or fancy keyboard selection shortcuts) and hightlighting to bring it all together.

Guide Their Eyes

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

Create Event Listeners in Polymer Elements

Code is usually pretty good at explaining itself. So it's best to just start writing code while you talking about it, then see if any additional explanation is required. When you fall into the trap of a long-winded explanation before you begin coding, you risk confusing the audience or unnecessarily repeating yourself.

Show First, then Maybe Explain

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

Observe Property Changes on a Custom Polymer Element

Before recording your first lesson, pick a title that accurately reflects what you plan on teaching. Use the "How do I..." trick to properly frame your lesson and title. "How do I dig a hole with a spoon?" would be answered with a lesson titled "Dig a Hole with a Spoon." Or "How do I eat a lobster with chopsticks?" would be answered with a lesson titled "Eat a Lobster with Chopsticks." 

Pick a Lesson Title

“We’ll just do it in post!”

This is always a phrase to be uttered with caution, but armed with just a couple of handy tools, we can to a lot of magic in post production even if we aren’t Hollywood editors. We will learn about the screencast editors best friend Ripple Delete. Then we will fine tune the recording removing any ummmm's or long running processes like installs or builds. Finally, we will make sure everything looks and sounds good and save it for publication!

Edit a screencast for publication

Teaching an egghead lesson should feel like walking the audience through a set of instructions. Do this, then that, move that, twist this, finally push that. The audience wants to see you putting the code together. Assembling your demo while they watch makes it feel much more real and achievable.

Teach Step-by-Step

Forgetting to change your resolution or setting up your mic will result in an unusable lesson. So please, please, please, set your resolution to 1280x720 (HiDPI), set your mic input to "Onyx Blackjack", and confirm that your mic loud enough (it helps to put your mouth as close to the mic as possible).

Prepare to Record - Screen Resolution and Mic Check

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

Use Lifecycle Callbacks On Custom Polymer Elements

You aren’t the “1-take dizzle”. Instead of trying to get an entire lesson captured in a single capture, consider capturing audio and video in chunks. With our without a script, capturing in chunks makes it easy to redo parts and stay on-topic. You might see a repeating pattern of typing a bit of code > stop and explain as needed > typing a bit of code > repeat.

Capture video and audio in “bite-sized” chunks

Polymer provides us a variety of data-binding configurations.  In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.