retlehs

Read more about Common Crawl

gmmedia

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "CollectionPage",
 "name": {{ collection.title | json }},
 "url": "{{ shop.url }}{{ collection.url }}",
 "description": {{ collection.description | strip_html | truncate: 300 | json }},
 "mainEntity": {
 "@type": "ItemList",
 "name": {{ collection.title | json }},

panoply

Shopify Client-Side Wishlist

This is a basic client~side wishlist in around 2kb-ish for usage within Shopify themes (though it can be appropriated outside of that context). It uses localstorage to keep track of liked products and allows for shared URL to be generated for cross device support.

Open the flems example (click the badge) to see a live demo of it and play around.

[![Flems](https://img.shields.io/badge/flems-example-playground?labelColor=34454d&color=999&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjY2NCA5LjE2TDE4LjIxNiAzLjczNkMxOC4xMiAzLjYxNiAxNy45NTIgMy41NDQgMTcuODA4IDMuNTQ0SDE3LjEzNkMxNi4zMiAzLjU0NCAxNS41NzYgNC4wNzIgMTUuMzEyIDQuODY0TDE0LjI4IDcuOTZDMTQuMjA4IDguMiAxNC4zNzYgOC40NjQgMTQuNjQgOC40NjRIMTYuNDY0QzE2LjcyOCA4LjQ2NCAxNi44OTYgOC43MDQgMTYuODI0IDguOTQ0TDE2LjEwNCAxMS4xMjhDMTYuMDA4IDExLjM2OCAxNS43OTIgMTEuNTM2IDE1LjUyOCAxMS41MzZIMTMuNTM2QzEzLjI3MiAxMS41MzYgMTMuMD

VuongNQ

{% capture breakLine %}
{% endcapture %}
{% liquid
	if content_for_header contains 'Shopify.designMode'
	echo content
	else
	assign listSpace = '  ,   ,    ,     ,      ,       ,        ,         ,          ' | split: ','
	assign clearCommentTag = ''
	assign listCommentTagsAfter = content | split: '<!--'
	for afterItem in listCommentTagsAfter

MWarCZ

function createIntersectionObserver(callback, opts = { root: null, rootMargin: '0px', threshold: 0}) {
    var previousY = new Map();
  
    var observer = new IntersectionObserver(function(entries, observer){
        console.log(entries);
        entries.forEach(function (entry) {
            var currY = entry.boundingClientRect.y;
            var prevY = previousY.get(entry.target);
            if(currY<prevY) { /* scroll down */ entry.scrollDirectionY = 'down'; }

PululuK

<?php

require(dirname(__FILE__).'/config/config.inc.php');

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

die('êtes vous sûre de réaliser cette action ?? Veuillez soovergarder votre base de données avant');

tkadlec

:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====

colbyfayock

/**
 * Loading Animation Snippet
 */

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

addyosmani

<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
// Select all images with the class "lazyload"
const images = document.querySelectorAll("img.lazyload");
// Check if the browser supports the "loading" attribute
if ('loading' in HTMLImageElement.prototype) {
  // If so, we'll update all <img src> to point to the data-src instead
  images.forEach(img => {
    img.src = img.dataset.src;

bessfernandez

Storybook for HTML

Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.

Typically you see Storybook used for React or other frameworks, but the library has recently introduced the option to use HTML for your Storybook projects. As a prototyping tool or playground this is great! No larger scale knowledge of other frameworks needed.

Install Storybook HTML