Craft Link List (Archive)

Introduction

Craft 3.5.17, Craft 3.6 RC2, tips, plugins and more

Hello Craft friends.

It's the last issue of 2020! We made it! We're wrapping up the year with Craft 3.5.17 and another release candidate of Craft 3.6. We've also got a lot of tips and techniques to help you get the most out of Craft. There are also some stats on CMS usage in 2020.

Thank you to Solspace, the sponsor of this issue.

Freeform from Solspace is the powerful and intuitive form solution for Craft CMS. Freeform 3.1.0 is on the horizon and you're invited join in the beta program for an early look at what's coming next.

Let's hit the links.

-John Morton

News

CMS | 2020 | The Web Almanac by HTTP Archive

In this 2020 wrap-up on CMS usage, notice how well Craft is doing from year-to-year. WordPress is up an admirable 7% from 2019. Drupal is down -10% from the previous year. Craft is up 5%. 🔥

Featured 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.

Tools, tips, and fundamentals

Update Craft to work with Composer 2

In the link above, Daryl Knight shared notes on updating to Composer 2.

On the same topic, be sure to read Andrew’s article mentioned in the previous issue, Updating Craft CMS Without Headaches, which includes a section on Composer 2.

Craft 3, Webpack 5, Tailwind 2, Boilerplate Github repo

A real-world boilerplate for Craft CMS 3 projects that leverages Webpack 5, Tailwind 2, PostCSS 8, and has a hot-reload dev environment.

Sprig Videos ⭐️

PutYourLightsOn has posted a helpful series of videos showing you how to get up to speed on Sprig.

Query Matrix blocks by block field value

The Tweet above asks the question, “Is it possible to query @craftcms matrix blocks by a block field value?” In the replies, you’ll find the answer is yes.

{% set blocks = clone(entry.myMatrixField)
  .myFieldHandle(‘x’)
  .all() %}

h/t Sean Smith

Fontawesome integration into Craft

Mark Busnelli Jr. shared a Javascript code snippet on Twitter that integrates Font Awesome icons into Craft using the Icon Picker plugin.

SVG `use` with External Reference, Take 2

use is an essential ingredient to an SVG icon system, as this post from CSS Tricks goes over.

Try out a real-world Craft CMS project in 4 steps ⭐️

The devMode.fm git repo has been public for a while and demonstrates loads of best practices. You can now install the whole site for yourself in 4 steps and tinker around all you want.

devMode.fm // Snowpack the faster frontend build tool

Drew Powers from skypack.dev joins the devMode crew to talk about Snowpack, a modern frontend build tool that’s blazingly fast, and zero config to get up and running.

Tailwind came up in the discussion. It appears that since the podcast recording a page on Snowpack and Tailwind has been added to the docs.

Craft 2 to Craft 3: Rinse and repeat

The link above is to a discussion about migrating data from Craft 2 to Craft 3. Lindsey mentioned that the upgrade process for an existing site is something you can perfect over multiple attempts at getting all of the data transfer and/or transformed successfully. If you've got a complex site to update, having multiple attempts at the update doesn't mean you're doing it wrong.

Perfecting your technique

Alpine JS modal component for Craft CMS ⭐️

Piotr has a new post on Craft Snippets demonstrating how to create a “content-agnostic and easy-to-customize modal component made with Alpine JS.” He’s also posted a demo link of the project.

Stress-reducing Steps to Update Craft CMS and Plugins

This article describes the steps Andrea follows to update Craft 3.5.x and plugins in a stress-free and reliable manner. 🧘

Analyze your HTTP response headers

Setting up HSTS on NGINX came up in Discord last week. The link above was mentioned as a starting point to check the existing security headers of your site. If you wondering about HSTS, there is an NGINX blog post that might be a good place to start, HTTP Strict Transport Security (HSTS) and NGINX.

Craft CMS GraphQL matrix shared fragment example

Dalton Rooney posted the snippet above to show how he uses GraphQL Matrix queries with Nuxt.

Is there a good way to get a specific cpresources hashed directory path on the front end?

In Discord, Lindsey asked how to get the directory path of a control panel resource. The directory names that Craft creates are hashed and can't be hard-coded into source code. Andrew shared the link to the SEOMatic repo showing where he does that in his code using the assetManager->getPublishedUrl() function.

How to Make Craft CMS Plugin Licenses Using the Craftnet API | Masuga Design

Need to give away a free license for a commercial plugin in the Craft CMS Plugin Store? There is no GUI at id.craftcms.com to do this, so use the Craftnet API to easily generate license keys without a purchase.

Sponsor

Join the Freeform 3.10 beta!

As part of our commitment to developing and releasing reliable, stable software, we now put all minor feature releases through a thorough beta testing period. If you'd like to be a part of the 3.10 beta, please click here for more details!

Plugged In

Presence

Display current users editing an entry. The users will be displayed in the right sidebar settings when editing an entry.

TaxCloud

Quickly calculate, collect and file US sales tax returns with minimal development by integrating with TaxCloud.

Google Tags

This plugin helps with Google tag integration into Craft. It includes support for multiple sites.

Yii, Twig, PHP & More

Cleaning up your template with conditionals

Leevi Graham shared the example above of an elegant Twig conditional statement.

Overheard

Craft and Content Modeling

Ben Croker on the importance of content strategy

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

MySQL with JSON in Laravel | fortrabbit blog

MySQL, like any other relational database, is great at modeling data structures and making connections between them. But what if there are some parts of your data that do not fit into a relational model - data that does not follow a strict schema? You could opt for a NoSQL database like MongoDB, which is optimized for storing JSON-like documents. But the truth is you don't need another database. MySQL has had a built-in JSON column type since 5.7, and a lot of improvements have been introduced with the 8.0 release.

Chrome DevTools "CSS Overview"

Chrome DevTools continue to grow. In the tweet above, Andrew points out the new CSS Overview.

Untangling scroll-related animations on websites | Feral

Figuring out how scroll-based animations are put together is key to avoid being murdered at the hands of your users. Here is a breakdown of some common scroll-based animation techniques.