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.
| 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'; } |
| <?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'); |
| :root { | |
| --violation-color: red; /* used for clear issues */ | |
| --warning-color: orange; /* used for potential issues we should look into */ | |
| } | |
| /* IMAGES */ | |
| /* | |
| * Lazy-Loaded Images Check | |
| * ==== |
| /** | |
| * 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; | |
| } |
| <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; |
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.
| /* -------------------------------------------- | |
| * Detect device orientation | |
| * and trigger changes based on it | |
| --------------------------------------------*/ | |
| function updateOrientation() { | |
| // Detect whether device supports orientationchange event, otherwise fall back to the resize event | |
| // Genius solution from http://stackoverflow.com/a/2307936 | |
| let supportsOrientationChange = "onorientationchange"; | |
| let orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; | |
| let newAngle = null; |
| # Delete all logs | |
| TRUNCATE ps_log; | |
| # Delete old connection data (only used for stats) | |
| # change 2016-02-01 00:00:00 according to you needs | |
| DELETE c, cs | |
| FROM ps_connections c | |
| LEFT JOIN ps_connections_source cs ON (c.id_connections = cs.id_connections) | |
| WHERE c.date_add < '2016-02-01 00:00:00'; |