Last week I had the pleasure of speaking at DevNexus on multiple Vue.js topics, one of which was the Nuxt.js framework. I had previously looked at Nuxt many months ago and decided I didn’t like it. The main issue I ran into were documentation issues and - well to be honest - just a gut feeling. When I was asked if I could give a Nuxt presentation to cover for a speaker who had to cancel, I was happy for the opportunity to give Nuxt another look. In the end, I came away with a much different opinion. I still think the docs need a bit of tweaking (I’ll mention one issue in this post), but overall I’m pretty damn impressed. Nuxt adds multiple shortcuts which let you follow a convention to skip a lot of boilerplate code. It’s really a nice framework that I’m hoping to use, and blog on, a bit more this year.
This post is really just for those folks who attended my DevNexus presentations this past week, although anyone is welcome to grab the assets if you want. I’ve zipped up both slide decks and demos. I’ve gone back and forth between putting presentations up on GitHub and if I give these again they move there, but for now you can just grab the zips.
I’ve been using Vue heavily for a while now and this week I ran into an issue that I’ve never seen before. It’s something documented and pretty well known (when I tweeted about it I got a reply in about 60 seconds) but I just had not hit it before. Before I get into $nextTick, let me explain what I was doing and what went wrong.
Over the past week or so I’ve been spending time learning what I can about GraphQL. I’ve already attended a few conference sessions on the topic and had a basic understanding of what it was, but I wanted to really begin cementing my knowledge of the topic in preparation for some things we’re doing at work. Randomly I saw a mention of “Learning GraphQL” via Twitter so I decided to give it a read. The book, written by Alex Banks and Eve Porcello, is a bit below two hundred pages so it can be comfortably read rather quickly, but packs a lot of material. I’ll go into detail below but the gist is that I definitely recommend it and I’ll be purchasing a hard copy to keep at my desk for the next few months.
Before I begin this post, a quick bit of context. A few days ago I was reading an excellent post on Vue and Internationalization (How to add Internationalization to a Vue Application), and while it is a great article in itself, towards the end the author mentions a small, random little component to make it easy to display country flags (vue-flag-icon). I was really intrigued by this and thought it would be interesting to start looking into the options available to us as Vue developers.
With that in mind, I hopped on Twitter and asked what folks would think about a regular series where I talk about components. The idea is to focus on small, easy to use components that integrate well into existing projects. "Small" is relative of course, but in my mind, things like Vuetify) would not apply. (And to be clear, Vuetify is pretty awesome!)
I also had one more "rule" that I reserve the right to ignore later. I wanted to focus on components that supported both npm installs as well as script tag use (i.e., add this script tag to your HTML) file. I think folks may disagree with me but I really think it's important for a Vue component to support both "build process" Vue apps (not a great phrase, sorry) as well as simple "I'm dropping Vue into a regular HTML page" use cases.
For now I'm going to try to make this a weekly series, but honestly I think it will be more like twice a month. And I'm going with Vue Components FTW as the tagline because this is my blog and I get to be as silly as I'd like!
A few days ago I blogged about how I was using serverless functions at Netlify to build an API proxy for MailChimp (“Adding Serverless Functions to Your Netlify Static Site”). This worked really well for me and I built a simple “one pager” for my web site making use of that function. But something really gnawed on me.
A few days ago I blogged about adding customized form handling to your static site at Netlify. This was done via a simple serverless function that listened for form submissions and used the SendGrid API to send an email. While this works just fine, I actually had something more interesting in mind that I had to delay a bit. Imagine if instead of just getting emails about contact form submissions, you actually got something with a bit of a warning in terms of their content:
A couple days ago I wrote up a look at serverless functions at Netlify (“Adding Serverless Functions to Your Netlify Static Site”) and today I want to look at a particular aspect of that feature - connecting functions to Netlify events.
Over the past week or so I’ve been playing around with the (kinda) new serverless feature at Netlify, built-in Lambda Functions support. One of the reasons I got into serverless was because of how well it works with static web sites, and I was pretty curious to see how Netlify’s integration worked. It took me a while to get things going, but I have to say, this is yet another damn impressive addition to the Netlify portfolio. I’ve long said that they are the “gold standard” for static web site hosting and this just proves again that they are completely nailing it. I did struggle a bit getting things going so what follows is a simple introduction with a focus on the things that confused me.