Forem: Dave Follett

My Advent of Code 2019 Approach

Dave Follett — Thu, 05 Dec 2019 05:00:00 +0000

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.

🎄 2018 Approach 🎄

I didn’t have much of an approach last year, but I did decide to do the following:

Use JavaScript as my language.
Do all development directly on CodeSandbox using the NodeJS template. The idea here was to avoid setting up a local development environment, but still have an easy way to share my solutions.

🎅 2019 Approach 🎅

Be more organized. Last year, I was careless by not using version control, sometimes I broke part 1 to solve part 2, and it was hard to make my code run different solutions. This year I’m not doing those things and my code can be found in the following GitHub repository:
- https://github.com/davefollett/advent-of-code
Setup a local development environment but still upload it to CodeSandbox. I decided to build on last year’s NodeJS web application by adding ExpressJS and making it more visually appealing (thanks to NES.css). Check it running live on CodeSandbox below. It’s also easy to run locally.

Don’t stress out about it. Last year, I put too much pressure on myself to solve each day’s puzzles as quickly as possible. This year I want to focus on creating good working solutions. If I get them done the same day they release, great. But if not, that’s okay, too. The creator of Advent of Code, Eric Wastl, recently gave good advice regarding this on Twitter:

AdventOfCode tips:

Focus on learning; don’t worry about the leaderboard.

It’s okay to skip puzzles!

It’s okay to ask for help!

If you don’t know how to solve something, try breaking it into smaller parts. Repeat as necessary.

You’ve got this! 🌟
@ericwastltwitter.com/ericwastl/status/1202297198236573697

🤔 Parting Thoughts 🤔

That pretty much wraps up how I’m approaching Advent of Code this year. Last year, I earned ⭐⭐ on 10 of the first 11 days (I completely skipped day 9). I hoping 🤞 to do about that well this year, but I’m not going to sweat it if I don’t.

Good luck and feel free to contact me if you need any hints or help.

What have you crashed?

Dave Follett — Tue, 11 Jun 2019 13:00:11 +0000

Over the years, when someone crashes something at work I (semi-jokingly) say:

If you don't crash something every so often, you aren't working hard enough.

And while that might not be 💯 percent correct, I feel it helps put the person at ease, especially if the person is new to the company. The truth is, it has and will happen to everyone.

So, have you 💥 crashed 💥 something important? Or brought the network to its knees? I'd ❤️ to hear about it.

Learning MDX Deck: Layouts

Dave Follett — Wed, 05 Jun 2019 04:00:00 +0000

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

Layouts for MDX Deck are React components. To use a one, you first need to import it.

import { LayoutName } from 'mdx-deck/layouts'

Because each slide can use a different layout, multiple layouts can also be imported all at once.

import { LayoutName1, LayoutName2, LayoutName2 } from 'mdx-deck/layouts'

Once the layout is imported, place your content inside its component tags as shown below, making sure to place newlines around content items. Failure to use newlines can cause the slide to render incorrectly. Optionally, you can put content above or below the layout component.

# SLIDE TITLE

<LayoutName>

Add your content here.

</LayoutName>

Now that we know how to use the MDX Deck layouts, lets take a look at all the built-in options.

Default

The absence of specifying a layout component will provide the default behavior of stacking all content vertically on the slide from top to bottom.

# LAYOUT: Default

1. All content stacks
1. Top to bottom
1. On the slide
1. This is an ordered list

Example of MDX Deck's Default Layout Rendered

Invert

The Invert layout stacks content vertically like the default layout but it reverses the theme’s foreground and background colors.

import { Invert } from 'mdx-deck/layouts'

<Invert>

# LAYOUT: Invert

The foreground and background colors are inverted from the theme.

</Invert>

Example of MDX Deck's Invert Layout Rendered

Split

The Split layout divides the slide into two vertical columns; left and right. The first item will display on the left and all additional items will be stacked vertically on the right.

import { Split } from 'mdx-deck/layouts'

# LAYOUT: Split

<Split>

![](https://media.giphy.com/media/1CrejqXxVZs9q/giphy.gif)

* Otter Elevates
* For The 🏀 Dunk

</Split>

First item displayed to the ⬅️, all remaining to the ➡️

Example of MDX Deck's Split Layout Rendered

SplitRight

The SplitRight layout is the reverse of the Split layout. The first item will display on the right and all additional items will be stacked vertically on the left.

import { SplitRight } from 'mdx-deck/layouts'

# LAYOUT: SplitRight

<SplitRight>

![](https://media.giphy.com/media/vjKrEyy2NVblS/giphy.gif)

* So Much Otter
* Cuteness 😍

</SplitRight>

First item displayed to the ➡️, all remaining to the ⬅️

Example of MDX Deck's SplitRight Layout Rendered

FullScreenCode

The FullScreenCode layout will display code blocks fenced by three back-ticks using the full screen.

import { SplitRight } from 'mdx-deck/layouts'

<FullScreenCode>


```js
   const arrayOfNumbers = [0, 1, 2, 3, 4, 5];

   const sum = arrayOfNumbers.reduce(function (accumulator, currentValue) {
     return accumulator + currentValue;
   });

   console.log("The sum is: " + sum);
```


</FullScreenCode>

Example of MDX Deck's FullScreenCode Layout Rendered

Horizontal

The Horizontal layout is the reverse of the default layout. Inside of stacking content vertically (top to bottom), it stacks the content left to right horizontally.

# LAYOUT: Horizontal

<Horizontal>

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

</Horizontal>

Each item displayed into its own column

👋 Hi Mr. Otter 👋

Example of MDX Deck's Horizontal Layout Rendered

🏁 Conclusion

As you can see, MDX Deck provides a solid set of layouts that will cover most presentation needs. All the code used for this article can be viewed using the following references.

CodeSandbox.io

GitHub repository

https://github.com/davefollett/learning-mdx-deck-layouts

Deployed to Netlify

https://learning-mdx-deck-layouts.davefollett.io

🔜 Up Next

Next in the Learning MDX Deck series we will explore MDX Deck’s built in theme options. I’ll add a link here when it’s published.

Learning MDX Deck: Deploy To Netlify

Dave Follett — Mon, 20 May 2019 04:00:00 +0000

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.

1️⃣ Create a Git repository

Netlify has a few deployment options, but my favorite is Continuous Deployment. Netlify will watch your Git repository and when it detects a change, it will build and redeploy your site automatically. Netlify currently supports the following Git providers for Continuous Deployment:

How to setting up a Git repository is well-documented online, so I will not cover it here but I will provide a link for all three options:

2️⃣ Add a build script

Now that the project is setup in Git, we need to add the following build script to our package.json file.

"build": "mdx-deck build deck.mdx",

The build script will export our presentation deck as a static HTML page with JS bundle that Netlify can deploy. With this change, the scripts section of package.json will now look like this.

"scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Running the build script can now be done with the following command.

npm run build

The results of the build script will be placed into a newly created dist/ folder so make sure you include it in your .gitignore file. Also, make sure to push these changes to your repository.

3️⃣ Add a netlify.toml file

Netlify uses an option configuration file to guide building and deploying sites. For this project it’s not strictly required, but it will make setting up Netlify easier in the next section. Our configuration file contains just two options; the build command and what directory to publish. Just place the following lines into a file named netlify.toml in the root of the project.

[build]
  command = "npm run build"
  publish = "dist/"

If you are interested in reading more about netlify.toml you can find it here in Netlify’s documentation.

4️⃣ Setup Netlify and deploy

Now that we have our project in a Git repository with a build script and Netlify configuration, we are ready to deploy to Netlify. If you don’t have an account, go ahead and sign up here. Once logged in, on the sites tab, click the new site from Git button located in the upper right of the page.

Netlify's deploy new site button

Next, select your Git provider: GitHub, GitLab, or Bitbucket.

Netlify's git provider options

With your Git provider selected, now select your repository. Note, you may have to configure your Git provider to have access to your repository in order to select it for deployment.

Netlify's git repository selections

The last step to deploying is to select our build options. Because we included a netlify.toml configuration file, all the build options will already be set and all we need to do is click the Deploy site button at the bottom of the page.

Netlify's deploy site button

After approximately a minute, the next screen will indicate that your site has been deployed and provide its URL as shown in the next screenshot.

Netlify's site deployed overview

🏁 Conclusion

Now that you have Netlify configured to deploy from your Git repository, anytime you make a change to the master branch on your Git Provider, Netlify will automatically rebuild your MDX Deck site and deploy it.

Reference Links:

All code used for this article can be found on GitHub here:
- https://github.com/davefollett/learning-mdx-deck-getting-started
My deployment URL for this MDX Deck site can be found here:
- https://learning-mdx-deck-getting-started.davefollett.io

🔜 Up Next

Next in the Learning MDX Deck series we will explore MDX Deck’s built in layout options for each slide. I’ll add a link here when it’s published.

Learning MDX Deck: Getting Started

Dave Follett — Sun, 12 May 2019 04:00:00 +0000

🙋 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

🏗️ Installation

First make sure you have node installed and paste the following as package.json into a new file. Alternatively, you can run: npm init to generate a package.json file.

{
"name": "demo-mdx-deck",
"version": "1.0.0",
"description": "Demo MDX Deck",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
  },
"author": "Dave Follett",
"license": "MIT"
}

Next, install mdx-deck with the following command.

npm i -D mdx-deck

🏃‍♀️ Getting Started

To create a simple presentation, create a file named deck.mdx and copy the following contents into it.

# SLIDE 1 - LIST

* I am a bullet list item
* I am another bullet list item
* I am another bullet list item

---

# SLIDE 2 - HEADERS

## Header 2
### Header 3
#### Header 4
##### Header 5

---

# SLIDE 3 - TABLE

| Fruit         | Weight   | Cost  |
| ------------- | ---------| ----- |
| Strawberries  | 16oz     | $3.99 |
| Blueberries   | 8oz      | $2.99 |
| Grapes        | 12oz     | $3.75 |

Each slide is separated by ---. To see the presentation in action, add the following to the scripts section of package.json.

"scripts": {
  "start": "mdx-deck deck.mdx"
}

And run the following command to start the development server.

npm start

The presentation can be viewed at http://localhost:8080/.

⌨️ Keyboard Shortcuts

The following keyboard shortcuts can be used to interact with the presentation.

Key	Description
Left Arrow	Go to previous slide (or step in Appear)
Right Arrow	Go to next slide (or step in Appear)
Space	Go to next slide (or step in Appear)
Alt + P	Toggle Presenter Mode
Alt + O	Toggle Overview Mode
Alt + G	Toggle Grid Mode

🏁 Conclusion

As you can see, you can get up and running with MDX Deck pretty quickly. There is a lot more to MDX Deck than I have shown here. Coming up 🔜, I will be exploring more of the features it provides, such as, importing react components, layouts, themes, speaker notes, and deploying to Netlify.

4 Tips For Workplace Pranks

Dave Follett — Tue, 19 Mar 2019 04:00:00 +0000

Any workplace can get stale, boring or in a rut. I think software development can be particularly susceptible because the high level of concentration needed to write code. Over the years I’ve found that that small breaks from the routine can help clear my head and allow me to better focus on my work. This typically means working a few minutes on the crossword or jigsaw puzzles in the break room when getting a coffee. Sometimes, it takes more than a puzzle to shake things up. That’s when I like to play harmless pranks on my coworkers. If done right, not only can this cause a break from the routine but it can crack a few smiles and cause a little laughter.

1️⃣ Pick the right person

Pick someone you have a good relationship with. Someone who you know has a sense of humor, someone who is isn’t going to get upset. Don’t pick the new guy or gal. If you think there is the slightest chance they will be upset, save yourself and HR from the potential drama, and pick a new target.

2️⃣ Be neutral and non-offensive

A prank should be harmless. You should be laughing with the target not at the target. Steer clear of religion, politics, or any other personal topics. Always err on the side of caution.

3️⃣ Don’t interfere with the work day

A prank should cause some laughs and be over quickly so the work day can continue. The last thing you want to do is interfere with your employer’s bottom line by causing a coworker to be unable to work for an extended period of time. That’s a good way to get fired. If the prank requires an elaborate set up, do it on your time not your employer’s. Either come in early or work late. Also, a good prank should not cause any damage. Once it’s over, it should be like it never happened.

4️⃣ A little goes a long way

Don’t over do it by playing a prank too often. Even harmless pranks can get old fast if you are pulling them too often.

👀 Getting Started

In case you are wondering how to get started while following all my rules, I will share with you one of my best pranks. With help from an accomplice, we secretly snuck through the office and placed googly eyes on various objects. Look at this stapler and potted plant. Try not to laugh, I dare you!

Googly eyes on potted plant and stapler

LEGOs are popular where I work and proved to be easy targets. Special thanks to their owners for being good sports!

Googly eyes on Star Wars LEGO sets (BB-8, K-2SO, Star Destroyer)

What is a safer target than a common area bathroom sign?

Googly eyes on bathroom sign

It took a few hours for the first set of googly eyes to get spotted and it didn’t take long for the investigation to target me. I caved immediately when questioned, I just couldn’t keep it in.

Perhaps my accomplice and I had the most fun, finding targets and causing distractions so the other could place the googly eyes, but the bottom line was we created some fun around the office in a harmless way. If we are all going to be working day in and day out together, it’s good to be able to share a few laughs along the way.

Do you have any good workplace pranks? Please please pretty please share them with me.

My Favorite Vue Resources

Dave Follett — Sat, 09 Mar 2019 05:00:00 +0000

To learn about Vue, I started following interesting people in the Vue community, listened to podcasts, and completed several tutorials. I thought it might be helpful to others to share some my favorite of those Vue resources.

👩 👨 People To Follow

The Vue community is full of people who are not just talented developers but also welcoming, thoughtful, and generous. This list could go on and on but I’ve pared it down to the following:

Evan You (@youyuxi) - Evan is the creator and leader of Vue.js. With Vue version 3 under heavy development, following him on twitter is a great way to keep up to date on what is coming.
Sarah Drasner (@sarah_edo) - Sarah is a Vue Core Team member and is an extremely talented writer and speaker. It’s hard to put into words the quality of her content, just check out her website at https://sarahdrasnerdesign.com and follow her on twitter.
Chris Fritz (@chrisvfritz) - Chris is a Vue Core Team member, Views on Vue podcast panelist, person responsible for the high quality of the Vue Documentation, and fellow Michigander.
Guillaume Chau (@akryum) - Guillaume is a Vue Core Team member and the author and/or major contributor to several prominent Vue libraries such as vue-apollo, vue-cli, and vue-devtools.
Divya Sasidharan (shortdiv) - Divya is a Views on Vue podcast panelist and developer advocate at Netlify.
Marina Mosti (@marinamosti) - I recently discovered Marina on dev.to by reading her very well written Hands-on Vue.js for Beginners series. She is also part of Vue Vixens, which I really admire.

🎧 Podcasts To Listen To

I started listening to podcasts about 2 years ago as a way to escape the repetitive drudgery of radio content and I’m so glad I did. It’s a great way for me to consume content while doing activities that don’t require my full attention. Like commuting to work, mowing the lawn, or waiting in the lobby while my daughters are participating in after school activities. Here is a list of my Vue favorite podcasts or specific episodes on Vue:

Views on Vue - This Vue specific podcast is apart of DevChat.tv’s network of podcasts and releases weekly. It follows the format of having a different guest each week that is interviewed by a panel people.
Official Vue News - Released weekly, this 5 to 7 minute podcast keeps me up-to-date with the latest Vue news and tutorials. 🚨 Shameless Plug Alert 🚨 My series, A New Vue on JavaScript30 was featured on episode 109.
Cynical Developer #99 (10-15-2018) - James Studdart (@jamesstuddart) interviews Brandon Lyons (@fudgelyons) about Vue.
Vue podcast list via QIT.cloud - QIT.cloud is a progressive web application (PWA) that can be used to search for podcasts by topic. At the time of writing, more than 200 podcasts Vue results are provided.

📑 Tutorials & Resources

Official Vue Documentation - Some of the best documentation around, make sure to also check out the Style Guide, Examples, and Cookbook sections.
Alligator.io - Alligator.io provides quick and to-the-point tutorials on Vue and other web technologies.
Awesome Vue - A curated list of awesome things related to Vue.
Scotch.io - Scotch.io provides a large catalog of great courses and tutorials on Vue and other web technologies.
Vue Mastery - Vue Mastery is a great source of high quality free and paid video tutorials about Vue. A portion of their proceeds are donated to Vue, so supporting them also helps to support Vue.
Dev.to - Dev.to is a fantastic community for developers to share articles, questions, discussions on any topic, including more than 550 articles on Vue.

2019 Self Improvement Plan

Dave Follett — Sun, 24 Feb 2019 05:00:00 +0000

Before last year, I had not put together an improvement plan for myself for at least 10 years. Putting down my thoughts on how to get better as a developer really did help. While I didn’t do all the things I set out to do, I did make progress towards last year’s general theme of putting myself out there more:

✔️️ Started a blog to work on my technical writing
✔️ Attended several local meetups
✔️ Was interviewed by The Cynical Developer Podcast about Code Reviews
✔️ Contributed to a couple open source projects
✔️ Completed Wes Bos’s #JavaScript30 course

However, I did miss the mark in some other areas by not doing the following:

😢 Didn’t take Wes Bos’s CSS Grid course
😢 Fell short meeting my Codewars goal
😢 Didn’t create a bot for slack or twitter

Overall, I’m still quite 😀 and this year I’m planning to do more and expand my goals to also cover some non-developer areas of my life. Also, last year I kept my plan to myself. This year I’m going to make it public in an effort to help keep me on track.

Personal Health

Lose 25 lbs
Stop drinking pop but mainly stop drinking diet coke
Reduce coffee consumption to 2 to 3 cups a day and only drink it before 12pm
Go to the doctor for a physical
Train and run 2 5k races

Professional

Average writing 2 blog posts a month to continue improving my writing
Continue to contribute to the QIT open source project
Attend at least 6 local meetups
Present at a local meetup
Increase my Codewars points to 700
Complete Wes Bos’s CSS Grid course
Research Areas:
- Web frontends with Vue and Nuxt
- Containers with Docker
- Backends and APIs with GraphQL, Hasura, and Graphcool
- Vue based mobile apps with Ionic and NativeScript Vue
- Testing with Cypress and Jest

A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas

Dave Follett — Sun, 06 Jan 2019 05:00:00 +0000

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.

🔑 Vue Concepts

The mounted lifecycle hook
Event binding
Methods
Special attribute - ref

🏗️ Vue Implementation

The first step is the same as my other articles, grab the base starter file from my getting started article and insert the code from the original #JavaScript30 project into their corresponding Vue locations.

The HTML section was placed inside the root <div id="app">
The cxt, isDrawing, lastX, lastY, hue, and direction variables were placed into the data section
The draw() function was placed into the methods section
The JavaScript that executed upon page load was placed into the mounted function
The computed and watch sections were not needed and removed
The <style> section was moved into my Vue version unchanged

This time around the “Getting Started” steps were nearly all that needed to be done, but we still have a few things left to do. First, we need to handle the events on the <canvas> element. In the #JavaScript30 version, the events for mousedown, mousemove, mouseup, and mouseout were setup with addEventListener() function calls. For the Vue version, I attached the events directly onto the <canvas> element using Vue event bindings of @mousedown, @mousemove, @mouseup, and @mouseout. Note that I am using Vue’s shorthand notation for event binding instead of v-on.

Then, to get a reference to the <canvas> element, I used Vue’s special attribute ref instead of how #JavaScript30 used document.querySelector('#draw'). By setting a ref of myCanvas on the html <canvas> element, I’m able to directly access it later as this.$refs.myCanvas. This completed the HTML section as shown in the below gist.

And finally, I moved the callback handlers for the mousedown, mouseup, and mouseout into functions within Vue’s methods section.

🏁 Putting It All Together

Click and drag in the CodeSandbox below to see the project in action.

Re-implementing this #JavaScript30 project proved to largely reuse the same techniques as the earlier projects, with the exception of using Vue’s special attribute ref. Even so, I feel that it continues to show how versatile Vue is and I had fun coding it.

Here are links to the #JavaScript30 version and my Vue version:

I hope you enjoyed this article. Feel free to message me with any questions, comments, or corrections. All code presented within this series is available in my fork of the official #JavaScript30 GitHub repository which is located at:

https://github.com/davefollett/JavaScript30

🔜 Up Next

Next in the A New Vue On JavaScript30 series will be #JavaScript30’s “10 - Hold Shift and Check Checkboxes” project. I’ll add a link here when it’s published.

2018 Give Back Gift List

Dave Follett — Mon, 26 Nov 2018 05:00:00 +0000

Every Christmas season, I always dread the task of coming up with gift ideas for me that family members can use. Is that too expensive? Is it not expensive enough? Can this very specific electronics part be easily purchased? These are just some of the questions I ask myself every year but NOT this year. I’m going to 💀🐦🐦⚫. This year, I have the perfect way to build a list and it also checks off another thing I have been meaning to do. Support the free content producers and open source projects I use every day by purchasing their swag. So I present to you:

🎄🎄🎄 Dave Follett’s 2018 Give Back Gift List 🎄🎄🎄

1️⃣ CodingBlocks Podcast

The CodingBlocks podcast is the first podcast I ever listened to and is responsible for getting me hooked on using podcasts as a learning medium. The podcast hosts, Allen Underwood, Joe Zack, and Michael Outlaw, breakdown complex programming topics into easy to digest explanations and have a lot of fun along the way. They also operate a very active and supportive slack channel. So I’m putting this nice CodingBlocks two tone coffee mug at the top of my list.

2️⃣ The Cynical Developer Podcast

Another favorite podcast of mine is The Cynical Developer. The host James Studdart produces weekly podcasts which are a mix of sharing his experience or conducting interviews on the latest development technology. I almost like this sharp blue t-shirt as much as i like his podcast. Almost.

3️⃣ Dev.to

If you haven’t checked out dev.to yet, you really should. It’s a developer-friendly platform for publishing software development articles. I publish my articles to my own website but I also crosspost them to dev.to because they provide a canonical link to the original source. Led by Ben Halpern, Jess Lee, and Peter Frank, it has quickly become one of my go-to resources for reading about software development. They also have a large store with a bunch of really nice items. I really hope I end up with the DEV hat!

4️⃣ Ubuntu Linux

I’ve used Linux a long time and Ubuntu is my favorite distribution. For me, it strikes the right balance of being stable but also providing access to the latest software package versions. Also, they just announced that Ubuntu 18.04 will be supported for 10 years so this t-shirt should be in style for a long time.

5️⃣ Vue.js

I’m not a JavaScript developer during my day job so when I decided I want to learn about it and JavaScript frameworks, I picked Vue.js because I heard it had a low barrier to entry. And wow, I was completely blow away. Not only was it easy for a non-JavaScript developer to pick up, it provides an excellent developer experience with its CLI and DevTools as well. Evan You (Vue creator) and his team have really created something special and I’d be happy to wear this t-shirt around town.

6️⃣ Guillaume Chau

The Vue Core Team does some pretty amazing work and it’s crazy to think nearly all of them do it for free in their spare time after working other jobs. Guillaume Chau is exactly one of those people and he works tirelessly to make Vue better. Recently he was a big part of the Vue CLI UI and the new Vue DevTools. He also recently released this cool vuefinity design t-shirt.

7️⃣ Vuetify

I really struggle with CSS and making things look nice. So when I need to quickly make something that looks good, I go for the Vuetify UI component library. If you aren’t familiar, think of Bootstrap but with a material design and built into Vue components. They also have a cool logo that works well on this hat.

8️⃣ GitLab

I started using GitLab a few years ago because it offered free private repositories. I’ve stayed because it works so well and they have steadily rolled out feature after feature. I’m interested to see where this 100% remote working company goes in the future. Check out this cool mug!

🎁 Wrap Up

I’m not quite sure how this will work out but I have high hopes to spread 💰 support and awareness to some of the free things I use everyday (while getting some cool gear). I can’t wait to see what I end up getting! I’ll be sure to update here with what ends up getting bought.

A New Vue On JavaScript30 - 06 Type Ahead

Dave Follett — Fri, 02 Nov 2018 04:00:00 +0000

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.

🔑 Vue Concepts

v-for directive
v-model directive to create two-way data bindings on form input
v-html directive
The mounted lifecycle hook
Computed Properties

🏗️ Vue Implementation

The HTML section was placed inside the root <div id="app">
The endpoint and cities variables were placed into the data section
The numberWithCommas() function was placed into the methods section
The findMatches() and displayMatches() functions were placed into the computed section
The fetch() call that executed on page load was placed into the mounted function
The watch section was not needed so it was removed
The <style> section was removed because the stylesheet was pulled in with a <link> tag

Whew, there was a lot going on there but if you have been reading the previous articles, hopefully it’s familiar 😀. Unfortunately, we have quite a bit of work still left to do to get this working. The next step is to adjust the displayMatches() computed property to return an object for each city instead of an HTML list item.

This will make it easier to loop the results of the displayMatches computed property within the HTML area, shown later. Next, I added a v-model directive to create a two-way data bindings on form input to the searchValue variable that I added to the data section.

The last set of changes are numerous and all inside the HTML area. Let’s first take a look at it in full and then break it down.

In the #JavaScript30 version, the unordered list <ul class="suggestions"> displayed default information and then as the user started typing, it was replaced with the matching city information. To do this with Vue, I inserted a v-if / v-else block within <ul class="suggestions"> to conditionally render the matching city information when searchValue is truthy and the default information when searchValue is falsy. You will probably notice I attached the v-if and v-else directives to <template> elements. I did this because Vue directives must be attached to a single element and <template> elements will not be rendered in the Document Object Model (DOM). Within the v-if section, I created matching HTML to the #JavaScript30 project by looping the displayMatches computed property with a v-for directive. On the <span class="name"> element you will see that I used the v-html directive. This was needed because the displayMatches computed property contains strings of HTML and the v-html directive will interpret them as HTML instead of plain text. Finally, the last step was to fill in the v-else section with the unchanged HTML from the #JavaScript30 project.

If you were able to follow and make any sense of all that, please pat yourself on the back and accept this major award: 🏆.

🏁 Putting It All Together

Up until this point, as far as I know, I have been able to create equivalent Vue versions of all the #JavaScript30 projects. But this time I ran into a 🐞 where the capitalization of highlighted text will be wrong as it auto completes if you are using Google Chrome. The 🐞 does not occur when using Firefox or Edge. Did I bump into a bug with Google Chrome or is it with my usage of v-html with Vue’s re-rendering? And why Google Chrome only? I created a CodeSandbox and shared it with a friend and on the Vue Land Discord in an attempt to figure it out. While we had some good theories, we were not able to come to a definitive answer as to why the issue was occurring for Google Chrome only. A few good ideas were also given on ways to restructure the code that probably would avoid the 🐞 but I decided to leave it in because I feel this version is close to matching the overall spirit of #JavaScript30 project. Plus, it’s all my code 😀. I’d still love to hear any feedback on this 🐞, so please let me know if you understand what is causing it.

While I don’t think Vue provides as much as a benefit in this #JavaScript30 project when compared to the others so far, I did find it to be a bigger challenge. It pushed me to learn new Vue techniques, such as the v-html directive and the use of v-if and v-else directives with <template> elements.

For more information about conditional rendering and using the <template> element as an invisible wrapper, you can read about it here in the Official Vue Documentation.
For more information about the v-html directive, you can read about it here in the Official Vue Documentation.

Here are links to the #JavaScript30 version and my Vue version:

I hope you enjoyed this article, feel free to message me with any questions, comments, or corrections. All code presented within this series is available in my fork of the official #JavaScript30 GitHub repository which is located at:

https://github.com/davefollett/JavaScript30

🔜 Up Next

Next in the A New Vue On JavaScript30 series is:

A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas

Dave Follett ・ Jan 7 '19

#anewvueonjs30 #vue #javascript30 #javascript

A New Vue On JavaScript30 - 05 Flex Panel Gallery

Dave Follett — Tue, 09 Oct 2018 04:00:00 +0000

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. My description doesn’t do it justice so how about an animated gif?

If you have been following along, you will notice that I’m skipping #JavaScript30’s 04 - Array Cardio Day 1 project. While this is a great exercise in learning about JavaScript Arrays, it doesn’t make sense to re-implement with Vue because nothing gets rendered to the page.

🔑 Vue Concepts

v-for directive
Class binding
Event binding

🏗️ Vue Implementation

The HTML section was placed inside the root <div id="app">
The functions were placed into the methods section
The computed, mounted, and watch sections were removed because they were not needed
The <style> section was maintained with no changes

From here, my approach was more or less the same as I took when doing the JavaScript Drum Kit project. First, take the repetitive HTML sections and convert them into an array of objects.

Then, loop the array using the v-for directive to create each panel <div>.

Within the loop, I did the following:

Inserted the three words to their <p> elements using text interpolation (the “Mustache” syntax double curly braces).
Bound the proper class to maintain the original CSS styles. Rather than toggle the classes, I used isOpen and isActive boolean flags to keep track of state.
Bound the @transitionend event to the toggleActive() function and the @click event to the toggleOpen() function. This is the Vue equivalent of #JavaScript30 using addEventListener() with those events.

🏁 Putting It All Together

The Flex Panel Gallery is another great project by Wes Bos’s #JavaScript30 but since the approach to create a Vue version was so similar to the JavaScript Drum Kit project, I decided to not go into as much detail on the explanations. If things don’t click for you here, give that article a quick read. Here are links to the #JavaScript30 version and my Vue version:

https://github.com/davefollett/JavaScript30

🔜 Up Next

Next in the A New Vue On JavaScript30 series is:

A New Vue On JavaScript30 - 06 Type Ahead

Dave Follett ・ Nov 2 '18

#anewvueonjs30 #vue #javascript30 #javascript