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.
extendsConf starts Tomorrow!
What are you doing tomorrow? 🤨 Do you have a computer? 🤪 Do you love Craft? 🤩 Great! ⭐
extendsConf, a free, independent online event for the Craft CMS community, and it begins tomorrow. To watch, you simply need to visit the extendsconf.com site. Here are the details:
October 21-22, 9am Pacific / 12pm Eastern / 5pm London
- Ben Croker — Reactive Twig Components with Sprig
- Zoltan Varady — Smarter Debugging in Craft CMS
- John Champ — Thoughts on Themes & Third-Party Markets
- Matt Stein — Project Config, for Skeptics
- Marie Manandise — Accessibility in CMSs... What's stopping us?
- The First Ever™ Craft Developer AMA
- ...and more!
Craft 184.108.40.206 released
Version 220.127.116.11 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."
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.
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. 🧨
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.
A simple field type plugin that allows users to type and store notes against any element type.
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.
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.
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.
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 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
: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.
The Tailwind team has introduced a new playground to make it easy to try out Tailwind.
Headless UI – Unstyled, fully accessible UI components
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
CSS Grid Generator
Jake Dohm claims this is the most useful site on the internet.
ChromeDevTools now has improved CSS Grid tools
This guide shows you how to discover CSS grids on a page, examine them, and debug layout issues in the Elements panel of Chrome DevTools.
Evan You announces Vue 3 at Vuejs Global Online
Evan begins speaking about 9:14 minutes into the video.
Vue 3.0 is finally out!
This post goes through some of the exciting new features of Vue 3 and shows how the new release will affect the way you write Vue Apps.
David Hemphill - Announcing Valet Lite
A local Laravel development platform for macOS coming soon. Sign up at the link for more info.
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? 🎃