DEV Community: Tara Z. Manicsic

Deploying with the Click of a Button

Tara Z. Manicsic — Mon, 03 Jan 2022 04:26:50 +0000

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on Twitter for each feature!

If only there was a way to help people (and/or pets) deploy your amazing projects with a click of a button. Well, funny you should mention that, Tara, because indeed there is! Adding the link to your project repo to this snippet of code here:

https://app.netlify.com/start/deploy?repository=<your repo right here!>

example: https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter

Then you can add the button to your website, repo, blog post, etc with this code:

markdown: 
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter)

html:
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter"><img src="https://www.netlify.com/img/deploy/button.svg"></a>

Would ya look at that, we have a button. Just look at it!

When someone clicks the button it will start to walk them through the deployment process. Have a click and try it yourself. Happy coding 👩🏻‍💻!

Resources for the Road

Deploy to Netlify Docs
See it in the wild in the Next.js template repo

Manage and Authenticate Users with Netlify Identity

Tara Z. Manicsic — Mon, 03 Jan 2022 04:18:04 +0000

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on Twitter for each feature!

"Authenticating users is a no-brainer", said no one ever. Managing user data, creating a login process, setting roles, gating content, these things are hard. One of my favorite strategies in web app development is getting a leg up by having someone else do the hard part. After all, you can't spell 'delegation' without 'leg'.

Netlify Identity lets us delegate a ton of authentication functionality:

the setup and infrastructure of storing user information, as well
login using external OAuth providers like GitHub, Google, GitLab, and Bitbucket
trigger serverless functions on validation, signup, or login events
generate custom emails
access and edit user information and roles
and more!

Leveraging the open-source GoTrue API, Netlify Identity can be added to your site with the Netlify Identity widget by adding this <script> tag:

<head><script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>

then including the widget in the site template, like so:

 <!-- Add a menu:
   Log in / Sign up - when the user is not logged in
   Username / Log out - when the user is logged in
  -->
  <div data-netlify-identity-menu></div>

  <!-- Add a simpler button:
    Simple button that will open the modal.
  -->
  <div data-netlify-identity-button>Login with Netlify Identity</div>

Put it all together and you get this lovely pop-up modal window where users can login or sign up!

Check out the Netlify Identity docs to learn more about everything you can do. I can't wait to see (or not see if I'm not logged in) all the authentication functionality you create! Happy coding 👩🏻‍💻!

Long-Running Asynchronous Processes with Netlify Background Functions

Tara Z. Manicsic — Mon, 03 Jan 2022 04:10:07 +0000

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on Twitter for each feature!

Ain't no serverless functions got time for that! If you noticed, that was a double negative because there is a serverless function that DOES have time for your long-running tasks: Netlify Background Functions. You can write these serverless functions in JavaScript, Typescript, or Go and like regular Netlify Functions, background functions are version-controlled, built, and deployed along with the rest of your Netlify site.

Here's a little sample Background Function in Go that you can try to see a function running longer than 10 seconds:

package main

import (
    "context"
    "log"
    "time"

    "github.com/aws/aws-lambda-go/events"
    "github.com/aws/aws-lambda-go/lambda"
)

func handler(ctx context.Context, request events.APIGatewayProxyRequest) (*events.APIGatewayProxyResponse, error) {
    for i := 0; i < 60; i++ {
        log.Println(i)
        time.Sleep(1 * time.Second)
    }
    return nil, nil
}

func main() {
    lambda.Start(handler)
}

You can check out some more detailed examples:

What exactly happens when you use a Background Function? Here are the details about the invocation and responses:

When a function is invoked asynchronously, there is an initial 202 success response. If function execution returns an error, an execution retry happens after one minute. If it fails again, another retry happens two minutes later. When a background function is successfully executed, you generally pass the result to a destination other than the originating client.

Background Functions are currently in beta but try 'em out, and take your time ;} Happy coding 👩🏻‍💻!

Resources for the Road

Do More at Build Time with Build Plugins

Tara Z. Manicsic — Mon, 03 Jan 2022 04:04:37 +0000

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on Twitter for each feature!
On engineering teams and in life, in general, time tends to be the most valuable yet least plentiful resource. Since studies have proven that us humans cannot multitask, we must find another way to do many things at once. May I introduce build plugins.

Build plugins are little utilities that you can install through your project dashboard that help with caching, optimizations, security, and a ton more. So when you run your build it can run your tests while you run to get lunch. Yay, more things at once! You can check out the whole list in the plugins dashboard.

Customize Your Workflow

Can you think of some tedious task that you have to take on every time you deploy? Have to check your Lighthouse score, optimize images, run Cypress end-to-end tests? Well, there are build plugins for that BUT what if there wasn't 😱?! No worries, you can spin up your own 🥳.

There are two parts to a Build Plugin: the .yml file for the plugins meta data and any .js files you need to make it do what you need. Then you can pull it into your projects with your netlify.toml configuration file. With plugins you can add functionality to each part of the build processes:

onPreBuild: runs before the build command is executed.
onBuild: runs directly after the build command is executed and before Functions bundling and Edge Handlers bundling.
onPostBuild: runs after the build command completes; after onBuild tasks, Functions bundling, and Edge Handlers bundling are executed; and before the deploy stage. Can be used to prevent a build from being deployed.
onError: runs when an error occurs in the build or deploy stage, failing the build. Can’t be used to prevent a build from being deployed.
onSuccess: runs when the deploy succeeds. Can’t be used to prevent a build from being deployed.
onEnd: runs after completion of the deploy stage, regardless of build error or success; is useful for resources cleanup. Can’t be used to prevent a build from being deployed.

Learn more about creating your own Build Plugins in our documentation. Happy coding 👩🏻‍💻!

Resources for the Road

Spreading the JAMuary Love

Tara Z. Manicsic — Wed, 05 Feb 2020 18:35:03 +0000

Hi JAMers! I'm here with the third edition of the JAMuary update. It's been a great month to learn about the JAMstack, the ecosystem, and everything that goes with it. Let's look at everything that's been covered the third week of JAMuary by our very own, talented, Divya aka @shortdiv.

To catch up here are the other two awesome recap posts: week 1 & week 2.

JAMuary Digest: 15th - 21st

JAMuary 15th - Is the JAMstack really better for SEO? Quality SEO has always been a tough subject for the web because how some frameworks render sites on the fly. So, how much of an SEO boost do you get from pre-rendering? Is that the only steps you should take to optimize your SEO? Learn more here where Divya discusses Search Engine Results Page, JSON-LD, and what all these have to do with the JAMstack.

"When it comes to optimizing your content, the JAMstack architecture sets your site up perfectly to hit your SEO goals. Actually reaching those goals however may take a bit of leg work."

Further reading: Five SEO Rules for Your JAMstack Site by Aaron Autrand

JAMuary 16th - Can content marketers create personalized experiences on the JAMstack? Not only does this post tell you that you can create personalized experiences but it also tells you how. It covers CMS features like analytics, standalone personalization services, and A/B testing at the edge.

"The decoupling between the presentation layer and content management means content delivery can be treated as a yet another service to plug into."

Further reading: Netlify Analytics - Accurate insights without performance impacts by Phil Hawksworth

JAMuary 17th - Do I have to know git to use the JAMstack? I have to admit I'm a bit biased because git has saved me so much time when I've borked a project and quickly git reset --hard to revert to the code where my project worked. But is it necessary to use it if you're coding a JAMstack site? This post will look at atomic deploys, immutability, and how much (or little) git you actually need to know.

"With the gaining momentum of JAMstack, there are now more opportunities than ever before for non technical users to access the JAMstack."

Further reading: Git-Centric Workflow: The One API to Rule Them All by swyx

JAMuary 18th - Is there such thing as too many APIs in a JAMstack site? These days it feels like there is an API for everything. For instance, are you ever in dire need of a Kanye quote? Me neither, but nonetheless there's an API for that. Using too many APIs can slow down your site as well as add more development time to use those APIs. Read this post to get some insight into API usage and the JAMstack.

"Stopping to consider the use case and sometimes even crafting a custom solution to an easily solvable problem (like comments) can mean a more lean, performant JAMstack site."

Further watching: You need an API: Now what? by Erin McKean

JAMuary 19th - Is there a risk to relying on external APIs on the JAMstack? Now that we've discussed the amount of APIs, Divya shines a light into how we use these APIs. Covering the use of APIs in JAMstack projects and how they effect the complexity of the development process she helps us weigh out API options.

"The move towards an API driven architecture offers flexibility and promises an improved developer experience, but doesn’t make the claim to prevent over-engineering. Instead, the JAMstack approach pushes developers to think critically about their sites, and make conscious decisions on what and how to consume and build."

Further reading: Check out the Netlify API

JAMuary 20th - Can the JAMstack be used for the public good? Spoiler alert 🚨 the answer is, "yes!" Government sites have to deal with compliance standards and security which may make the JAMstack seem like a bad choice. Yet, Divya walks us through the many ways that the JAMstack can actually be a really smart choice utilizing prerendering assets, decoupling front and backend, Git workflow, and serving static content over a CDN.

"By encouraging a separation between frontend and backend, and a reliance on Git for version control and user management, the JAMstack eases the workflow for building and delivering federally compliant websites."

Further reading: Site of the Week: Water for People

JAMuary 21st - What does the M in JAMstack actually mean? This post clarifies that the M in JAMstack stands for Markup and not Markdown as some may misconstrue. The process of content delivery is the focus as well as the ups and downs (see what I did there) of different approaches.

"The ambiguity of the acronym aside, the M in JAMstack emphasizes how content is delivered, instead of what format that content was in prior to pre-rendering. Content on the JAMstack can effectively come from anywhere, but as long as it’s pre-rendered it counts as “M”."
Further Reading: JAMstack Examples

Tune in Next Week 📺

We hope you've enjoyed this installment of the JAMuary catch up. We'll be coming out with the another one for the last week (😩) of this JAMuary season. Stay tuned and remember, it doesn't need to be JAMuary season for you to enjoy the JAMstack too!

What is Serverless Besides a Bad Name for Using Servers

Tara Z. Manicsic — Tue, 07 Jan 2020 19:18:37 +0000

Chances are you've heard the term serverless and are even using some form of ✨serverless magic✨ yourself. But software is confusing, and software terms even more so. When I started learning about the JAMstack it threw me for a loop. Talk about how the JAMstack doesn’t use servers but relies on serverless functions left me confused. Spoiler alert: this doesn't make sense because serverless computing actually uses servers. In the hopes of clarifying one mystery I wanted to write a quick post on what serverless really means.

What it is, tho

Serverless: is a cloud-computing execution model in which the cloud provider runs the server, and dynamically manages the allocation of machine resources. (via Wiki)

Serverless is just a way of handling how you are using servers. Instead of handling all the infrastructure and server operations yourself you're relying on a cloud provider. The cloud provider can help with scaling, server provisioning, capacity provisioning, patching, and more (depending on the provider). This takes a lot of operational burden off of your team and can help solve potential problems like slow response due to bottleneck or expensive unused overhead. Like most JAMstack best practices, serverless provides a way to delegate more tasks so the dev team can spend more time innovating and creating features, not focusing on maintenance.

Why the term "serverless" was chosen is mind-boggling to me. Regardless, the use of such an arguably contentious name has generated a good amount of buzz. So many people have heard or know the term "serverless". I mean, I had finally convinced my family that "the cloud" is just servers. Do you know how long it's going to take me to convince them that "server*less*" is servers!?! Thanks, internet 🙄.

It's All About the Money

Although serverless is technically an execution model, you're mostly talking about a service. Adding more to the confusion pile, the pricing model of serverless is enough to throw you into a tizzy. Traditionally, the cost model for running your own server is usually [server capabilities] * [uptime] or you pay upfront for what you think you'll use. In comparison, with serverless computing, cloud providers will charge based on the resources used. How much capacity is used or how many times something is executed can determine the cost for a service.

A nice part about this pricing model, and one of the main benefits of serverless, is that most providers won't charge you if your server is idle, isn't taking up a lot of memory or executing code a ton. This can cost a lot less because a server usually sits idle for a huge percentage of the time. Although it's great to be able to hand your server reins over to a cloud provider you'll want to understand how often your code is executing and how your app is using memory to avoid a financial foot gun.

Key Takeaways

serverless uses servers
cloud providers handle the server operations
pricing is usually quite confusing
naming things is hard

I hope this helps shed some light onto one of the key elements of the JAMstack. The awesome Jason Lengstorf has a whole series coming out this #JAMuary to help you wrap your mind around serverless functions. Keep your ear to the ground for that. In the meantime here are some other resources to peruse. Happy coding!👩🏻‍💻

Resources for the Road:

p.s. I use a lot of handy Wiki links here, if you feel so inclined to thank them for this you can donate here.