Skip to content

Instantly share code, notes, and snippets.

Avatar

Shane Biggs moxdev

View GitHub Profile
@moxdev
moxdev / postcss.config.js
Last active Feb 26, 2021 — forked from ryanflorence/postcss.config.js
Tailwind & CSSNANO Postcss config
View postcss.config.js
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
process.env.NODE_ENV === "production" && require("cssnano"),
].filter(Boolean),
};
@moxdev
moxdev / gatsby-browser.js
Created Feb 23, 2021
Console log focused elements in GatsbyJS. Add code to the `gatsby-browser.js` file.
View gatsby-browser.js
/**
* For debugging focus in Gatsby
* @ https://flaviocopes.com/gatsby-load-external-js/
* @ https://hiddedevries.nl/en/blog/2019-01-30-console-logging-the-focused-element-as-it-changes
* @ https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
*/
const addScript = () => {
const html = `<script>
document.body.addEventListener('focus', function() {
console.log('focused: ', document.activeElement)
@moxdev
moxdev / media-query.css
Created Jan 12, 2021 — forked from gokulkrishh/media-query.css
CSS Media Queries for Desktop, Tablet, Mobile.
View media-query.css
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
@moxdev
moxdev / gatsby-setup-prettier-eslint-emotion-tailwindcss.md
Last active Nov 12, 2020
Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss Basic Configs.
View gatsby-setup-prettier-eslint-emotion-tailwindcss.md

Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss

basic configs for a new Gatsby build

Install Prettier & ESLint Dev Dependencies

npm i -D babel-eslint babel-preset-gatsby eslint eslint-config-airbnb eslint-config-prettier eslint-config-wesbos eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies

@moxdev
moxdev / category.js
Created Oct 15, 2020 — forked from brataaaan/category.js
IDEA: You can create Categories (e.g. Programming Basics). Inside these you can create individual lessons (e.g. What are variables?, what are recursions?). If I want to create a Lesson inside I category now, I don't want to reference the category manually but want the category already selected for reference in the new lesson document. So there s…
View category.js
import { FaListAlt } from 'react-icons/lib/fa'
export default {
title: "Category",
name: "category",
type: "document",
icon: FaListAlt,
fields: [
{
title: "Name",
@moxdev
moxdev / deskStructure.js
Created Oct 15, 2020 — forked from brataaaan/deskStructure.js
Idea: You can create Categories (e.g. Programming Basics). Inside these you can create individual lessons (e.g. What are variables?, what are recursions?).
View deskStructure.js
import S from "@sanity/desk-tool/structure-builder"
import { FaFileText, FaEdit, FaComment, FaPlayCircle, FaQuestionCircle, FaCheckCircle } from 'react-icons/lib/fa'
export default () =>
S.list()
.title("App")
.items([
S.listItem()
.title("Content")
.icon(FaFileText)
@moxdev
moxdev / wp_add_img_title.php
Created Dec 16, 2019
Add titles to uploaded images in WordPress
View wp_add_img_title.php
/**
* Sets img title of uploaded attachment.
* If no title, will use the alt as a defualt title.
*
* @param array $attr Image tag attributes.
* @param WP_Post $attachment The WP_Post object for the attachment.
* @link https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_attributes/
*
* @return array (maybe) filtered image tag attributes.
*/
@moxdev
moxdev / evoluent-verticalmouse.xml
Created Nov 12, 2019 — forked from patrickwelker/evoluent-verticalmouse.xml
Karabiner Template to setup a secondary function key with the Evoluent Vertical Mouse. In this example Button 6 gets assigned the following modifiers: Shift-Right, Control-Right, Option-Right and Command-Right. Import via `<include path="YOUR-PATH-HERE/evoluent-verticalmouse.xml" />`
View evoluent-verticalmouse.xml
<?xml version="1.0"?>
<root>
<item>
<name>Evoluent VerticalMouse</name>
<appendix>All customizations only apply for the Evoluent VerticalMouse.</appendix>
<appendix>Note: button 4 (the mouse scroll button) and button 5 are swapped in Karabiner. I still use the default Evoluent labeling.</appendix>
<devicevendordef>
<vendorname>EVOLUENT</vendorname>
<vendorid>0x1a7c</vendorid>
</devicevendordef>
@moxdev
moxdev / focal-point-cropping-picture-tag-for-post-thumbnail.php
Last active Jul 1, 2019
Focal Point Cropping Picture Tag for Post Thumbnail #wp
View focal-point-cropping-picture-tag-for-post-thumbnail.php
<?php
// UPDATE: This may also be accomplished with object-postion css property depending on your needs. Check that first.
/**
* Focal Point Cropping using post_thumbnail(); featured image of page.
* - displays post_thumbnail() at different crops at different breakpoints
* - using the <picture></picture> tag srcset to returnt the correct img
* - decide on image widths and change crop sizes
* - edit source "media" widths to coorespond with crop sizes
*/
@moxdev
moxdev / get-metadata-of-post-thumbnail.php
Created Jun 28, 2019
Get Metadata of Post Thumbnail #wp
View get-metadata-of-post-thumbnail.php
<?php
/**
* Get Metadata of Post Thumbnail
* - An attachment/image ID is all that's needed to retrieve its alt and title attributes.
*
*/
$img_id = get_post_thumbnail_id();
$img_alt = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
$img_title = get_the_title( $img_id );