Skip to content

Instantly share code, notes, and snippets.

View danyn's full-sized avatar
😃
ok

Daniel Eisen danyn

😃
ok
View GitHub Profile
@danyn
danyn / animated-close-icon.markdown
Created July 24, 2019 02:48
animated close icon
@danyn
danyn / shopify URL pattern
Created November 22, 2018 05:12
some snippets from the web using for hreflang options
{% assign current_url = '' %}
{% case template %}
{% when 'page' %}
{% assign current_url = page.url %}
{% when 'blog' %}
{% assign current_url = blog.url %}
{% when 'article' %}
{% assign current_url = blog.url %}
{% when 'collection' %}
<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus
var Shopify = Shopify || {};
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex) {
compare two branches seeing where they may merge:
git log --graph --oneline master some_branch
compare a commit to its parent not its current state in compared to the branch it is now part of
git show
@danyn
danyn / index.html
Last active January 21, 2018 00:33
Testing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using Spans for layout</title>
<style>
.c{border:1px solid;
text-align:center;
font-size:40px;
@danyn
danyn / foreword.txt
Created January 4, 2018 06:47
some tools for media queries
TIP Look at how people are handeling the different screen sizes...Start with this sanity check!
https://mediaqueri.es/
Tip a good layout uses techniques from all these: liquid, adaptive, responsive, and static. Adaptive is my favorite if I had to choose just one. Adaptive is like a static layout that shifts to accommodate sizes. This makes it easier for reading if you happend to change your screen size.
Liquid is naturally accomodating, however things shift around alot and containers have overflow. Pure liquid is my least favorite layout style.
Responsive has some liquid elements and some adaptive elements. I personally like adaptive and reponsive is a way to make that more accomodating to more scenarios using liquid elements. All of these will need media queries except static.
This webiste displays this well: http://www.liquidapsive.com/
@danyn
danyn / reference.txt
Last active December 21, 2017 20:41
Font Awesome - I think so.
How to use: https://fontawesome.com/get-started/svg-with-js
https://fontawesome.com/icons?d=gallery
or only search for ones that are free -> https://fontawesome.com/icons?d=gallery&s=regular,solid&m=free
https://jsfiddle.net/daniel_eisen/dgw1k5k6/
"""
https://fontawesome.com/how-to-use/svg-with-js
The fontawesome module replaces the <i> tags with <svg> tags when the page is rendered using js
interesting features are:
@danyn
danyn / box-model.txt
Last active December 11, 2017 02:14
css course linda.com
html{
box-sizing:border-box
}
*,*:before,*:after{
box-sizing:inherit
}
margin adds space inside an element
margin-top:;
@danyn
danyn / click image to add to cart debut product page
Last active October 14, 2017 18:34
shows how relative link be used to redirect a product page in debut to the cart with the item in it. It adds a click event to a div which contains the product image. When you click the image it fires the redirect. This is only for products without variants.
{% include 'shipping-times' %}
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">
{% comment %}
<html>
<head>
<title></title>
</head>
<body style="border: 0; margin:0; padding:0; background-color:#000000">
<script src="http://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;