Skip to content

Instantly share code, notes, and snippets.

View haroldao's full-sized avatar
🎯
Design + Dev

Harold AO haroldao

🎯
Design + Dev
137 followers · 265 following
View GitHub Profile
@haroldao
haroldao / Schema Markup
Last active December 19, 2020 00:34
<!-- /snippets/schema-markup.liquid -->
<script type="application/ld+json">
{%- if template == 'index' -%}
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "{{ shop.name }}",
"alternateName": "{{ shop.description }}",
"url": "{{ shop.url }}"
@haroldao
haroldao / Schema Product Page - Shopify (product.liquid)
Last active December 19, 2020 16:59
Schema Product Page - Shopify (product.liquid)
{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
@haroldao
haroldao / Website_Protection.txt
Created January 16, 2021 20:19
<!-- Disable keyboard keys -->
<script>
document.onkeydown = function(e) {
return false;
}
</script>
<!-- Disable images drag -->
<script>
window.ondragstart = function() {
@haroldao
haroldao / confetti.js
Created February 18, 2021 21:07
function confetti(){
'use strict';
var onlyOnKonami = false;
$(function() {
// Globals
var $window = $(window)
, random = Math.random
@haroldao
haroldao / checkBrowserVersion.js
Created April 4, 2021 15:34
function checkBrowserVersion() {
var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName = navigator.appName;
var objfullVersion = ''+parseFloat(navigator.appVersion);
var objBrMajorVersion = parseInt(navigator.appVersion,10);
var objOffsetName,objOffsetVersion,ix;
// In Chrome
if ((objOffsetVersion=objAgent.indexOf("Chrome"))!=-1) {
@haroldao
haroldao / anti-flicker
Created April 21, 2021 02:19
Anti Flicker // https://support.google.com/optimize/answer/7100284
<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>
@haroldao
haroldao / faq-accordion.markdown
Created April 21, 2021 20:04
FAQ Accordion
@haroldao
haroldao / check-isMobile.js
Created May 29, 2021 14:03
// check device
let isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
isMobile = true;
document.body.classList.add('is-mobile');
}
@haroldao
haroldao / functions.scss
Created July 9, 2021 16:02
px to em/rem | SCSS
// Source: https://css-tricks.com/snippets/sass/px-to-em-functions/
@function rem($pixels, $context: 16) {
@return (math.div($pixels, $context)) * 1rem;
}
@haroldao
haroldao / real-viewport.js
Created September 9, 2021 11:05
Real Viewport (No more issues with the 100vh in mobile browsers)
/* Vh Calc */
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.setTimeout(() => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}, 1000);