Simple Journal

May contain items such as: Today I Learned (TIL), Fails, Wins, Helps, Snippets, Questions I had || Answers found, Topics of Curiosity, and more. It's also a place I put random simple things that I can reference later.

Tables of Contents

• Legend.
• Setting up a new Machine.
• Table of Contents 2019.
• Table of Contents 2023.
• Table of Contents 2024.

Legend

• bullets and sub bullets are info points
• ! = ideas
• ¿ ? = questions
• TIL = Today I Learned

New Machine Setup:

Programs to Install:

• Adobe ???
• ClenMyMac X
• Figma
• FileZilla
• Firefox, Edge, Chrome (plugins below), Brave, Opera, Firefox Focus
• Visual Studio Code (further instructions and Plugins below)
• ImageOptim
• Password Manager/s
• Microsoft Office and/or Mac equivalents
• Teams and Slack
• Zoom
• VPN/s
• XCode

Chrome Plugins

• Password Manager
• Pomodoro
• Axe Dev Tools
• Lighthouse
• Color Contrast Analyzer by accessibility.oit.ncsu.edu
• Browserstack and Browserstack Accessibility
• Debug CSS
• Fake Filler
• uBlock Origin
• Wapp Analyzer
• Wave Evaluation Tool
• Web Developer Checklist
• React Developer Tools
• ¿¿¿ Website SEO Checker: Free Audit & Analysis
• ¿¿¿ CSS Peeper

Install Visual Studio Code

Extensions:

• Prettier
• Auto Close tags
• Multi-Cursor Case Preserve
• Git Lens
• HTML/CSS Class auto complete
• PHP Intelephense
• Format HTML in PHP
• File Tree to Text Generator
• Code Spell Checker

Github access token

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/DanielBabcock/b11e0df92ec970868f83e56dd4e00729/raw/ddb2f40807452eb61e145cf7b0234d84e5c00b8b/create-key.sh)"

Install Homebrew

Run the following command in your Terminal. You will be prompted for your computer password. It will not display the characters as you type them for security reasons. https://brew.sh/

below in gist

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once the process is complete, run the brew command in your terminal. If you see the output command not found: brew figure it out. Some stuff is commented out in the raw markup immediately below this..

Install Modern Shell

Run the following command in your Terminal.

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/DanielBabcock/55d9f18f49d5897300f9ec1eaa39596a/raw/e60e0688f5b4fbb3cf367f92d76d35eaa67d377e/configure-zsh.sh)"

Once complete, run the following command in your Terminal.

echo $SHELL

You should see either /usr/local/bin/zsh or /bin/zsh as the output of that command. If you don't, contact an instructor.

Install Node

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/DanielBabcock/b721fd90ddf675274a9d4be750df6d49/raw/e6a99f919efbbd4be9eae3e7a6654f39f58b78f6/install-nvm.sh)"

Once the process is complete, quit your Terminal application completely, and then open it again immediately.

Run the node -v command in your Terminal. If you see the output command not found: node then contact an instructor.

Verify Installs:

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/DanielBabcock/4c8ae4d61516788f491ee504f16f85e7/raw/ae02c52727848dd23b9f39f663b110dc124ae8fd/verify-installs.sh)"

Project setup example

• project-setup.sh idea stolen from NSS/Coach https://gist.githubusercontent.com/DanielBabcock/3d11af493ca4ac2b7e47f015c8952f52/raw/138f3127ad0e07827268eb8278e09040fbc2bcdf/projectsetup.sh

Table of Contents 2019

• July
• August

July

• TIL/still Confused: Javascript Hoisting Article: Understanding Hoisting in Javascrip
• TIL: about Block Scope vs Function Scope, here's an article about it.
• TIL: ES6 things. I was rejecting a pull request and decided to spend some time leanring more about the why's of let vs var. Found this little article by my favourite code blogger Tania Rascia,ES6 Syntax and Feature Overview .

August

• TIL: Inspect previous commit. git log , find the commit you wish to checkout and copy its hash, git checkout <commit hash>

Table of Contents 2023

• January
• March
• May
• July
• August
• September
• October

January #jan

• TIL: Px vs REM Article: Why designers should move from px to rem : "we are in the dark about users browser preset choices, so using rem will serve zoom and root font-size change and make everyone happy."
• TIL: for Hubspot form embeds on external sites you can remove CSS styling coming from Hubspot by adding "css" to remove basic styling and "cssRequired" to remove styling from required items to the embed code. Example: portalId: "", formId: "",     css: '',

March

• Snippet: for switching content based on URL in PHP Wordpress Templates. Saves writing multiple templates often times, primary example is a Landing Page and it's coresponding Thank You page or just multiple pages with very similar content and small diffs.

  <?php if ( is_page('thank-you') ) { ?>
  
  <?php } else { ?>
  
  <?php } ?>
  
  
  

May

• and a further snippet url conditional content requiring further else if to your if - else. (write unique html/code in between each)

  <?php if (is_page('url')) { ?>
      
  <?php } else if (is_page('id-id')) { ?>
      
  <?php } else if (is_page('id-id')) { ?>
      
  <?php } else { ?>
      
  <?php } ?>
  
  
  

July

• Was struggling with indention in lists and paragraphs specifically around using custom images in the places of bullet points with a nice amount of space between them and the first line while keeping the subsequent lines from overflowing under the list decoration images..

  <style>
    /* set all of X block elements to Y indention */
    li {
      text-indent: -17px
    }
    /* remove indention from :first-line */
    li:first-line {
      text-indent: 0
    }
    /* remove default list decoration/bullet points */
    ul {      
      list-style: none;
    }
    /* custom image in the place of list decoration/bullet points*/
    li::before {
      content: url('');
      display: inline-block;    
      margin-right: 13px;
    }
  </style>
  
  <li>
    Requires workarounds:
    Must search and clean up “unauthorized accounts” in chart of accounts
  </li>
  
  
  

• Two ways to generate Pardot Forms in Wordpress sites after downloading the plugin: w/ php

  <?php echo do_shortcode('[mb_pardot handler="{URL-here}" brand="brand_asc" prospect="MQL" interest="ChMS" redirect="{URL-here}" comments_type="textarea" comments="How did you hear about us?" button_color="#6486FD"]') ?>      
    
  

• • w/ html

  [brand_pardot handler="{URL-here}" brand="___" prospect="MQL" interest="" redirect="{URL-here}" button_color="##fff"]      
  

August

• #If IE BUGS you can use this media query to attack them without breaking things in normal browsers:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      // IE10+ CSS here
    }
  
  

September

• PHP Template place to drop content in via the admin page editor.

  <?php the_content(); ?>
  
  

October 2023

• simple css hack to help visually debug layout issues..

    * { border: 1px solid red; }
  
  
  

• node Check version with

  node -v

    sudo npm cache clean -f 
  
  

• • (force) clear your npm cache

    sudo npm install -g n 
  
  

• • install n (this might take a while)

    sudo n stable 
  
  

• • upgrade to the current stable version

• If you initially installed Node.js with Homebrew, run:

brew update

brew upgrade node

npm install -g npm

• Or as a one-liner:

brew update && brew upgrade node && npm install -g npm

• A convenient way to change versions is to use n:

brew install n

• To install the latest version of Node.js with n:

n latest

• Or, to install the latest LTS version with n:

n lts

• Alternatively, you could use nvm instead of n:

brew install nvm

• To install the latest version of Node.js with nvm:

nvm install node

Table of contents 2024

• Febraury

• April

February

• Alt text solutions for CSS Background Images:

• • (this is for background images that are contextual, if they are not contextual then they can be ignored, unsure if automated SEO/Accessibilty audit will spot the fix though manual testing should accept it)
• • Instead of applying a background image to a div or other block element via CSS background image apply it to the span within the div with rol= and aria-label= applied and the content inside of that span.

    <div>
      <span class="background-image" role="img" aria-label="place alt text here"> </span>
        all the rest of my content
    </div>
  
  
  

• • OR a slightly hackier way where the CSS background image is still applied to the div but will allow a screen reader to ignore the div and read the span's aria-label in liu of a normal alt tag before moving on to the content.

    <div class="background-image">
      <span role="img" aria-label="place alt text here"> </span>
        all the rest of my content
    </div>
  
  
  

Useful Wordpress Plugins

• • Yoast SEO
• • Wp Mail SMTP
• • Smush
• • GTM4WP
• • Busted!
• • NotificationX
• • Better Find and Replace
• • Better Search Replace
• • WP Rocket
• • Hummingbird

Common errors for Content Producers (SEO, Performance, Accessibility):

• Title tags and Headline H1 tags:

• • Main Differences:
• • • Title Tags appear in search engines and the Web browser’s title bar
• • • H1 Headers appear within the body text of the webpage
• • • Search engines give more weight to Title Tags than H1 Headers
• • Common Best Practices:
• • • Both Title and H1 should be slightly different, not identical.
• • • Use only one Title Tag and one H1 Header per webpage (Do not use H1 for styling purposes)
• • • Include the page’s primary keyword in both tags
• • • Try to place the keyword early in both tags
• • • Use the keyword only once within each tag
• • • Keep both titles short (55 characters or less recommended, 65 char max)

• Images:

• • Canvas Sizing: The Canvas size affects file size and processing power. Most Images do not need to over 2000px wide. For larger images such as full width banner, background, or high resolution art I usually still top them out at 2850px.
• • File sizing: Make and effort to lower file sizes and strip metadata. There are tons of tools out there to make this easy, ImageOptim (free program), TinyPNG (browser), and Adobe Lightroom or Photoshop for a few examples. You can usually get away with even running lossy compression in the 75%-90% range for more file compression before your eyes will see the difference (experiment with this).
• • Accessibility:
• • • Alt Tags: INCLUDE THEM! Make them Concise enough not to waste a lot of screen reader time but clear enough to translate any content relevancy. In WordPress you can add Alt tags to images as you upload them. In code you do this with and alt="description here" tag. If you can not add them directly in a case like a CSS background image here are some hacks.

• Meta Descriptions

• • Max 156 characters,
• • must different than the Title and Heading

• Content length:

• • Min 300 words.

• ¿ Need to Learn more about Web Components with Vanilla code. ?

After acquiring benchmark testing scores test these plugins on Group Code (DR0) Site Code (DR0-DRR) as test bed for all (DR0) broad spectrum performance tweaks:

• Wp Rocket
• Smush
• Hummingbird if not rocket
• Broken Link Checker
• Health Check & Troubleshooting
• WP-Optimize
• GFChart (gravity forms data visuals)

April

Animating SVGs can be done by adding a version of the below code inside the shape section (ex: line, path, circle) of an SVG.

<animateTransform 
       attributeName="transform" 
       dur="15s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />