moxdev

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    process.env.NODE_ENV === "production" && require("cssnano"),
  ].filter(Boolean),
};

moxdev

/**
 * 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

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  

moxdev

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

import { FaListAlt } from 'react-icons/lib/fa'

export default {
    title: "Category",
    name: "category",
    type: "document",
    icon: FaListAlt,
    fields: [
        {
            title: "Name",

moxdev

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

/**
 * 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

<?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

<?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

<?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 );