2018 was my first experience with Advent of Code. It sounded like Codewars, so I jumped right in. Wow, I was really impressed. Not only were the puzzles fun, but I really like these aspects as well:

• Most of the data sets are large, your algorithms and data structures matter. With modern computing, it can be easy to skip or not be worth the time to optimize code. But this doesn’t mean we shouldn’t practice it and the Advent of Code puzzles tend to put you into situations where it’s necessary to do so.
• The puzzle descriptions can be long and contain lots of details not necessary to solve the puzzle. Some folks don’t like this but I do. Raise your hand ✋ if you have been given a vaguely worded specification that you have to comb through to find the real requirements. Like it or not, some degree of detective 🕵️ work is part of a software developer’s job.
• Each day’s part 2 puzzle provides a twist on the part 1 puzzle. Sometimes its a small adjustment to solve part 2, but sometimes it’s a near rewrite. Though making a major change can be frustrating, this frequently happens for software applications whether it be the customer changing their mind or through the addition of new features.

Welcome back 👋. In this installment of Learning MDX Deck, I will go over MDX Deck’s built-in layouts. It is also possible to create your own layouts. I won’t cover that here, but you can read about it in the MDX Deck documentation. So lets get right to it. Here is what MDX Deck provides for layouts out of the box.

• Default
• Invert
• Split
• SplitRight
• FullScreenCode
• Horizontal

In the previous article, Learning MDX Deck: Getting Started, I showed how to get up and running with MDX Deck. MDX Deck is a tool for creating presentation deck websites using MDX. But what good is creating a super sweet presentation if you can’t easily show it off to your friends? Let’s take the exact code from Learning MDX Deck: Getting Started and deploy it to Netlify.

🙋 What is MDX Deck?

MDX Deck was created by Brent Jackson (@jxnblk) and is a tool for creating presentation deck websites using MDX. MDX provides the ability to use React’s JSX inside Markdown. The combination creates a powerful experience for building a web-based presentation deck. Here are a list of features, as listed on the MDX Deck GitHub Page:

• 📝 Write presentations in markdown
• ⚛ Import and use React components
• 💅 Customizable themes and components
• 0️⃣ Zero-config CLI
• 💁‍♀️ Presenter mode
• 📓 Speaker notes

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be working with #JavaScript30’s 08 Fun with HTML5 Canvas project. This project uses a <canvas> element to provide a fun a way to draw in the browser window by clicking and dragging the mouse. As you draw, the line will get larger and smaller as well as change color. Here is an animated gif of it in action.

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be working with #JavaScript30’s 06 - Type Ahead project. This project uses an input to filter down a list of cities as the user types. In addition to filtering the list, it also highlights the input value in the results. Here is an animated gif of it in action.

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be tackling #JavaScript30’s 05 - Flex Panel Gallery project. This project displays a page of five images in vertical slices with words on them. When an image is clicked there is a neat animation to expand the image and slide in some additional text.

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the third of Wes Bos’s (@wesbos) #JavaScript30 projects titled: 03 - CSS Variables. This project uses an HTML inputs to control CSS variables to change an image’s blur, padding, and background color.

Key Vue Concepts

The following Vue concepts are discussed in this article:

• Style binding with :style (shorthand for v-bind:style)
• v-model directive to create two-way data bindings on form input
• Computed Properties
• Watched Properties
• The mounted lifecycle hook

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the second of Wes Bos’s (@wesbos) #JavaScript30 projects titled: 02 - JS and CSS Clock. It’s a cool looking analog clock that uses a setInterval() callback to control the clock hands by rotating them based on the current time.

Key Vue Concepts

The following Vue concepts are discussed in this article:

• Style binding with :style (shorthand for v-bind:style)
• data reactivity
• mounted lifecycle hook

This article is part of the A New Vue On JavaScript30 series that explores re-implementing JavaScript30 projects using Vue. Before reading, its a good idea to have:

• Completed JavaScript30’s 01 - JavaScript Drum Kit project
• Read the A New Vue On JavaScript30 - Getting Started article

Key Vue Concepts

The following Vue concepts are discussed in this article:

• v-for directive
• Class binding
• Event binding