Craft Link List (Archive)

Introduction

extendsConf begins, Craft CMS tips, Craft plugins, Vue 3, webpack 5, and more

Welcome to another Craft Link List. Let's jump right into the links.

The top story in this issue is time-sensitive. Tomorrow is the extendsConf. It's online, free, and it's about Craft. The rest of the issue is packed with more great links on Craft CMS with tips, plugins, and other webdev topics. There's no overarching theme, but I hope you come away learning something new.

I want to thank the sponsors of this issue.

Blitz Plugin, from Put Your Lights On, makes setting up static-caching for your Craft site a breeze with a simple, two-step process. Find out more about Blitz.

Freeform, from Solspace, is the intuitive form builder for Craft CMS informed by 4+ years of development and refinement. Learn about the power of Freeform.

Let's hit the links.

-John Morton

News

Craft 3.5.13.2 released

Version 3.5.13.2 is the current version of Craft as I write this. There were a few small bug fixes after 3.5.13 was released. Here are the highlights from 3.5.13.

👤 Improved CP color contrast
🔒 Discoverable Reset Password pages
＠ List of aliases on the System Report utility
🐪 Manual project config YAML generation
🌄 dataUrl() Twig function

Regarding the "discoverable" password reset page, here's a link about the concept of well-known services offered by webservers.

devMode.fm // Should Craft CMS use Yii3 or Laravel? ⭐️

In this episode, the devMode crew has a round table discussion to discuss whether a future version of Craft CMS should use Yii3 or Laravel.

Free migration of Craft 2 plugins to Craft 3

Verbb announced a plan to migrate Craft 2 plugins to Craft 3 for free. This offer applies to free and open-source Craft 2 plugins that are hosted on Github. If there is a Craft 2 plugin that you need on Craft 3, find the plugin's Github URL and visit the page above.

What can we learn from the W3C CMS selection process?

As mentioned in the previous issue, Craft CMS was chosen as the CMS for the upcoming W3C website. The post linked above takes "a step-by-step look at what happened [to] see what others might be able to use in their own selection processes."

Featured Sponsor

Blitz Plugin

Blitz provides intelligent static page caching for creating lightning-fast sites with Craft CMS. It significantly improves a site’s performance by reducing server response time to as low as 50ms, especially when used with Cloudflare or Netlify. With a simple 2-step installation, Blitz reduces hosting costs, keeps Google happy and makes YOU look good!!

Tools, tips, and fundamentals

Using template UI elements to extend Craft CMS control panel ⭐️

Piort (aka Craft Snippets) posted an interesting post just as this issue wrapped. "Using template UI elements, we can add custom pieces of Twig code to elements pages in the control panel."

Import data into Craft CMS, Feed Me plugin tutorial - EaglePeak Consulting

Alex Aguilar continues his Craft tutorial (see the previous issue for part one of the series). In this lesson, Alex uses FeedMe to import a CSV of board games into Craft. He discusses how to map data to Craft's fields and customize the admin panel once the data is in place.

How do I loop through entries for a specific entry type?

This answer includes variants for both Craft 2 and Craft 3.

Batch Craft webpack

A zero-config webpack package made for Craft CMS

Batch Craft Starter

An opinionated Craft CMS project starter that integrates VueJS and Tailwind CSS and Docksal configuration.

How to query entries by DateTime field between two dates with GraphQL

Meta Tags — Preview, Edit and Generate

Meta Tags is a tool to debug and generate meta tag code for any website. Meta Tags allows you to edit and experiment with your content and then preview how your webpage will look on Google, Facebook, Twitter and more.

Perfecting your technique

How We Prevent Leaky Templates in Craft CMS | Viget

A "leaky template" is a template that is using a variable from the parent template that isn't explicitly passed to the child template. Trevor Davis shows how to prevent this leakage with a custom Twig Extension contained in a PHP module.

CraftQuest on Call 9: Ryan Rants | CraftQuest

In this recorded live-stream, Ryan and Andrew walk through the Craft compiled templates, answer questions on creating a debug toolbar panel, multi-site limits, and more. Ryan goes on a rant about how agencies, customers, and clients treat technology as "set it and forget it" and the harm it does. Also, please stay off Ryan's lawn.

nystudio107 | Speeding Up Tailwind CSS Builds ⭐️

Learn how to optimize your Tailwind CSS PostCSS build times to make local development with Hot Module Replacement or Live Reload orders of magnitude faster.

When and How to Use Vue 3.0 with Craft CMS | Viget ⭐️

Lindsey Bradford from Viget discusses how to incorporate Vue components in Craft.

Using Github actions to deploy Craft CMS websites

In this post, Jérôme Coupé says, "While I regularly use services like Buddy or DeployHQ to build and deploy Craft CMS websites, I wanted to experiment with Github Actions. Here is what I came up with and why."

AVIF support | Imager X

The AVIF image file format was mentioned in this newsletter a couple of issues ago and offers impressive file sizes for images. Imager X now supports this new file format. 🧨

Sponsor

Features and design mean nothing when they don't work reliably.

Don't let any of your valuable form submissions fall through the cracks! Freeform has been meticulously designed and developed to be the most robust form solution for Craft.

Plugged In

Notes

A simple field type plugin that allows users to type and store notes against any element type.

Sarbacane

Plugin to link with Sarbacane. It enables the creation and deletion of a contact in Sarbacane by API at each creation or deletion of the entry selected in the parameters in Craft CMS.

Klaviyo Connect

Take advantage of Klaviyo to drive more sales with super-targeted, highly-relevant email marketing campaigns.

Imager X AWS Serverless Transformer ⭐️

A plugin for using AWS Serverless Image Handler as a transformer in Imager X. It also serves as an example of how to make a custom transformer for Imager X.

Sentry.io

This plugin logs your exceptions to Sentry.io, and also includes functions to easily send the exceptions you catch yourself to Sentry.

Do It Yourself Widget

A super-easy way to create dashboard widgets for the Control Panel.

Pixabay

This plugin adds a "Search Pixabay" button to all asset selection windows. The selected pictures will be automatically downloaded from Pixabay and saved to the server.

Image toolbox

Image Toolbox is a plugin that provides a number of useful image-related tools for your templates.

Yii, Twig, PHP & More

Twig-components: Twig components inspired from blade components

This is a Twig extension for automatically creating components as tags. The name of the tag is based on files in a directory. This is highly inspired by blade components.

Note: This is a WIP progress. Since it's on Github, you can post issues to help deal with any issues you run into.

It’s not Craft, but it’s interesting.

Webpack 5 released

Webpack 5 has been released. According to the release Tweet, here's what you can expect:

Faster builds
Smaller builds
Federated Modules (faster-scaled builds)
Better Stats
Better Module Types
Asset Modules
Top Level Await and other spec support!

(Note that the screenshot above is to show that I'm flummoxed by the capitalization of the word 'webpack'. I think it's capitalized only when it begins a sentence except for Tuesdays that fall on odd-numbered dates.)

Webpack: To v5 from v4

With the release of webpack 5, there is a good chance you're interested in migrating your build-system from webpack 4 to webpack 5 and that's the topic of this link.

CSS Nugget: Scroll Snap

This demo of CSS snapping without Javascript was mentioned in this Twitter thread. Even better, Can I Use? says yes, you can.

min(), max(), and clamp(): three logical CSS functions to use today

:focus-visible Is Here · Matthias Ott – User Experience Designer

Removing focus styles is bad for accessibility. The :focus-visible pseudo-class, now available in Chrome 86, "allow[s] authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where the focus is, and not visible in other cases."

Can I use shows :focus-visible isn't widely supported yet, but there is a polyfil available.

If you rely on Moment.js for dealing with time in Javascript, you may have seen this note from the development team: "We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done." The post linked above will introduce you to date-fns, a new and smaller library that will help you deal with dates.

Faster Web App Delivery with PRPL

PRPL is a pattern for structuring and serving web applications and Progressive Web Apps (PWAs) with an emphasis on improved app delivery and launch performance.

Read this post by Addy Osmani for more.

Rel=prefetch and the Importance of Effective HTTP/2 Prioritisation

Many performance techniques focus on improving the performance of the current page, but there are some that help with the performance of the next page – caching, prefetching, and prerendering for example.

Prefetch & preconnect-dns priority

Preconnect and prefetch-dns are both ways which you can ask your browser to do a DNS lookup and connection before you need any resources from that domain, but it helps shave time off the critical rendering path. This article looks at what difference the order of the tag makes. The short answer is none.

Prefetching, preloading, prebrowsing | CSS-Tricks

Resource prefetching is another performance-enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.

Maintaining ownership continuity of your user account's repositories

This post on Github will help your code live beyond you. Happy Halloween? 🎃