Breakpoints

Bootstrap Search Icon

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>

Bootstrap Visibility Classes Hide/Show

HIDE
• Hidden on all:   .d-none
• Hidden only on xs:    .d-none .d-sm-block
• Hidden only on sm :    .d-sm-none .d-md-block
• Hidden only on md :    .d-md-none .d-lg-block
• Hidden only on lg :    .d-lg-none .d-xl-block
• Hidden only on xl :    .d-xl-none

SHOW
• Show on all:   .d-block
• Show only on xs:    .d-block .d-sm-none
• Show only on sm :    .d-none .d-sm-block .d-md-none
• Show only on md :    .d-none .d-md-block .d-lg-none
• Show only on lg :    .d-none .d-lg-block .d-xl-none
• Show only on xl :    .d-none .d-xl-block

Cloudinary Core JS Shrinkwrap

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.min.js"></script>
<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({
cloud_name: "demo"
});
cl.responsive();
</script>

Dummy Placeholder Images

https://picsum.photos/600/400

https://loremflickr.com/600/400

https://res.cloudinary.com/demo/image/upload/w_500/f_auto,q_auto,dpr_auto/castle.jpg

https://res.cloudinary.com/demo/image/upload/w_500/f_auto,q_auto,dpr_auto/kitten.jpg

https://res.cloudinary.com/demo/image/upload/w_500/f_auto,q_auto,dpr_auto/balloons.jpg

https://res.cloudinary.com/demo/image/upload/w_500/f_auto,q_auto,dpr_auto/horses.jpg

https://placehold.co/

https://placehold.co/350x350

https://placehold.co/400x300?text=400+x+300

Other Cloudinary images: sample, dog, horse, smiling_man, sheep, woman, fat_cat, kitten, white_cat, sofa_cat, balloons, flowers_and_birds, car_lady_dog, baby, puppy, horses

Responsive Images using srcset

<img srcset="example-500w.jpg 500w,
             example-800w.jpg 800w,
             example-1280w.jpg 1280w"
sizes="(max-width: 600px) 480px,
(max-width: 800px) 720px, 1280px"
alt="Example">

Picture Element

  <picture>
  <!-- Mobile -->
  <source media="(min-width: 580px)"
    srcset="example-516w.jpg">
    <!-- Sm Tablet  -->   
    <source media="(min-width: 780px)"
    srcset="example-696x392.jpg">
    <!-- Lg Tablet -->
    <source media="(min-width: 1000px)"
    srcset="example-936×527.jpg">
     <!-- Sm Laptop  -->
    <source media="(min-width: 1200px)"
    srcset="example-1116×628.jpg">
    <!-- Desktop  -->
    <source media="(min-width: 1400px)"
    srcset="example-1296×729.jpg">
    <!-- Fallback Image -->
    <img aria-hidden="true" 
        loading="lazy"
        decoding="async"
        src="example-1296×729.jpg"
        width="1296" height="729"
        title="Default Image"
        alt="Default Image">
  </picture>

CSS Background Image

.myImg {
background-image: url('background.jpg');
background-repeat: no-repeat;
}

CSS Object Fit

.fill  {object-fit: fill;}
.contain  {object-fit: contain;}
.cover  {object-fit: cover;}
.scale-down  {object-fit: scale-down;}
.none  {object-fit: none;}

Circular or Rounded Image via Cloudinary

https://res.cloudinary.com/demo/image/upload/w_300,h_300,c_thumb,r_max,q_auto/sample.jpg

Circular or Rounded Image via CSS

img {border-radius: 50%;}

Transparent or Opague Image via Cloudinary

https://res.cloudinary.com/demo/image/upload/o_50,w_500/f_auto,q_auto/sample.jpg

Image Opacity via CSS

img {opacity: 0.5;}

Responsive Images via CSS

img {
max-width: 100%;
object-fit: cover;
height: auto;
}

Adjust Letter Spacing via CSS

class="my-3"  .tightLetters { letter-spacing: -1px;}

Letter Spacing Using Inline CSS

 <p style="letter-spacing:2px;">Wide spacing between letters</p>

Adjust Word Spacing via CSS

class="my-3"  .wordSpace { word-spacing: -2px;}

Adjust Word Spacing via inline CSS

 
<p style="word-spacing: -2px;" >My words are closer together.</p>

11ty Eleventy Commands

INSTALL DEPENDENCIES:
        npm install
BUILD and SERVE ELEVENTY (open in browser):
        npm run build-serve
START LOCAL SERVER:
        npx @11ty/eleventy --serve --port=8081
BUILD FOR PRODUCTION (remove old public folder):   
        rm -rf public  && npm run go
UPDATE NPM PACKAGES (to latest builds):    
        npm update
BUILD SITE INCREMENTALLY:
        npx @11ty/eleventy --serve --incremental
DEBUG ELEVENTY:    
        DEBUG=Eleventy* npx @11ty/eleventy
DEBUG ELEVENTY WITH VERBOSE OUTPUT:
        DEBUG=Eleventy* npx @11ty/eleventy --dryrun

11ty Eleventy Code Methods

TO USE INCLUDES:
        {% include "components/gift-cards.html" %}
TO EXTEND LAYOUT:
        {% extends 'layouts/base.html' %}
USE ELEVENTY NAVIGATION (in front-matter):      
      eleventyNavigation:
          key: Driveways
          order: 301
          parent: Gallery
USE BLOCK ELEMENTS:
          {% block head %}
          {% endblock %}  
USE DATA FILES DYNAMICALLY:         
          {% for picture in gallery['outdoor-lighting-gallery'][page.fileSlug].pictures %}   
          {% endfor %}
ENV FILE: (.env for Cloudinary Accounts)
          CLOUD_NAME=yourCloudName
          API_KEY=123456789012345
          API_SECRET=yourSecretKeyCode

LOGIC FOR USING CONTENT IN FRONT-MATTER:
          <h2 class="title">
          <!-- If mainHeading is in front-matter than use it otherwise use the title here -->
            {% if mainHeading %}
              {{ mainHeading }}
            {% else %}
              {{ title }}
            {% endif %}
            </h2>

CSS Borders and Outlines

.dotted {border: 3px solid teal; outline: 3px dotted teal; padding: 5px;}
.double {border: 1px solid teal; outline: 10px double teal; padding: 1px;}
.fat {border: 5px solid teal;outline: 5px solid;padding: 1px;}
.skinny {border: 3px solid teal;outline: 3px solid;padding: 1px;}

Different Style Sheets for Different Screen Sizes or Devices

<link rel="stylesheet" media="screen and (min-width: 900px)" href="css/widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/smallscreen.css">

Style a Radio Button or other input type

#myForm input[type="radio"] 
    {
    color: black;
    position: initial;
    left: 5px;
    }

Force Browser Refresh using CSS Versioning or cache busting

<link rel="stylesheet" href="css/global-styles.css?v=6">

Viewport Sizing using vw vh vmin vmax

vh: is Relative to 1% of the height of the viewport.  1vh = 1% of viewport height.

vw: is Relative to 1% of the width of the viewport.  1vw = 1% of viewport width.

vmin: is relative to 1% of viewport's smaller dimension.  1vmin = 1vw or 1vh, whichever is smaller.

vmax: is relative to 1% of viewport's larger dimension  1vmax = 1vw or 1vh, whichever is larger.

Centered Background Image using CSS

#myCenteredImage {
    width: 100%;
    height: 100%;
    background: url("https://picsum.photos/400/400") center center no-repeat;
}

Background Image with Dark Overlay using CSS

.myBGImg {
    background-image:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("https://res.cloudinary.com/demo/image/upload/w_800/w_auto,c_scale,f_auto,q_auto,dpr_auto/castle.jpg");
    height:90vh;
}

Show or Hide Scroll Bar via CSS

body { 
    overflow-y: auto;  /* Show Scroll Bar  */
}
body {
    overflow: hidden; /* Hide Scroll Bar */
}

Target Specific HTML Elements via CSS Selectors

p.intro    Style all <p> elements with class="intro"

div, p    Style all <div> elements and all p> elements.

div p    Style all <p> elements inside <div> elements.

div > p    Style all <p> elements where the parent is a <div> element.

div + p   Style all <p> elements that are placed immediately after <div> elements

[title~=flower]    Style all elements with a title attribute containing the word "flower"

a[href*="stonestore"]    Style every element whose href attribute value contains the substring "stonestore"

p:first-child    Style every <p> element that is the first child of its parent container

p:last-child    Style every <p> element that is the last child of its parent container

p::first-letter    Style the first letter of every <p> element

p::first-line    Style the first line of every <p> element

div::first-line   Style the first line of every div element

h1:first-of-type    Style the first h1 element but not the rest of the h1 elements

input:focus    Style the input element which has the focus (user clicked in box)

a:hover    Styles the links when they are hovered

img:hover    Styles the images when they are hovered

:not(p)    Styles every element that is not a <p> element

p:nth-child(2)    Styles every p element that is the 2nd Child of parent element

p:nth-child(odd)    Styles every other (odd number) p elements.

:root    Styles apply to every element, in HTML, the root element is always the html element.

:target    Style the current active target element.

a[href^="http://"]    Style all external links

a[href^="mailto:"]    Style all email links

a[href$=".pdf"]    Style all pdf links

Add Box Shadow via CSS

.myBoxShadow {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
}

Add Text Shadow via CSS

.myTXShadow {
    color: red;
    text-shadow: 2px 2px 4px #000000;
}

Adjust Space Between Characters via CSS

.justify-letters {
    text-align: justify;
    text-justify:inter-character; /* adjusts space between characters */
}

Adjust Space Between Words via CSS

.justify-words {
    text-align: justify;
    text-justify:inter-word; /* adjusts space between words */
}

Set RGBA Color Values via CSS

color: rgba(179,160,138,.9); /* sets rgba colors */

<h2 style="background-color:rgb(255, 0, 0);"> Makes background red. </h2>

Add a Focus for Text Input Fields

input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px #51CBEE;
    outline: none;
    padding: 3px 0 3px 3px;
    margin: 5px 1px 3px 0;
    border: 1px solid #51CBEE;
}

Multiple Background Images via CSS

#multipleBackgroundImages {
    background-image: url(https://picsum.photos/300/250), 
        url(https://picsum.photos/600/400);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    background-color: rgba(159,232,251,0.42);
    background-size: 50% 100%;
}

Center Contents with the Web Page via CSS

.container {
    width: 1000px;  /* Change this value to customize the content area*/
    margin: 0 auto;
}

Style Horizontal Rules via CSS

hr { border: 0; border-bottom: 3px dashed #1abc9c; background: #999;  /* Style all HRs*/ }
.hr-short {width: 75%;}
.hr-teal {width:75%; border-bottom:3px solid teal;}
<hr style="width:75%; border-bottom:2px solid teal;">
<hr class="hr-teal" >

CSS Custom Properties using var

:root {
    --main-bg-color: coral;
}
#div1 {
    background-color: var(--main-bg-color);  /* This will make the background coral  */
    padding: 5px;
}

CSS Import

@import url(https://fonts.googleapis.com/css?family=Work+Sans:800);

Media Queries

@media only screen and (min-width: 600px) { ...}
@media only screen and (min-width: 768px) { ...}
@media only screen and (max-width: 600px) { }
@media screen and (max-width: 900px) and (min-width: 600px) {}
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {}
@media only screen and (orientation: landscape) {}
@media="all and (min-width:500px)"
@media="screen and (max-height:700px)"
@media="screen and (device-width:500px)"
@media="screen and (device-height:500px)"
@media="screen and (aspect-ratio:16/9)"
@media="screen and (color:3)"
@media="screen and (min-color-index:256)"
@media="print and (resolution:300dpi)"
@media="tv and (scan:interlace)"
@media="handheld and (grid:1)"

Style Odd & Even Elements via CSS

p:nth-child(odd) {
background: pink;
}
p:nth-child(even) {
background: skyblue;
}

Style Every "Required" Input Element

input:required {
background-color: yellow;   /* Make every required input element have a yellow background */
}

CSS Link Hover States Pseudo Classes

a.myLink:link { color: blue; text-decoration:none;}
a.myLink:visited { color: green; text-decoration:underline;}
a.myLink:active { color: red; text-decoration:underline;}
a.myLink:hover { color: pink; text-decoration:underline;}  

Insert Content Before an Element

<!DOCTYPE html>
<html>
    <head>
    <style>
    p#hometown::before {
    content: url(https://picsum.photos/800/400);  /* Inserts an image before the paragraph */
    }
    </style>
    </head>
    <body>
    <p id="home>town">My name is Donald</p>
    <p>I live in Ducksburg</p>
</body>
</html>

Responsive Typography using Calc and Viewport Units

See: Responsive Typography codepen

h1 {  font-size: calc(40px + (50 - 40) * ((100vw - 300px) / (1600 - 300)));  }
h2 {  font-size: calc(32px + (40 - 32) * ((100vw - 300px) / (1600 - 300)));  }
h3 { font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));  }
h4 { font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));  }
p {  font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300))); line-height: 1.4;  }
figcaption { font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1600 - 300))); line-height: 1.2;}

Multiple Columns that flow like newspapers via pure css

See example in CodePen

.newspaper { column-count: 3;}

Flex Container Properties

display: flex
align-content: space-between | space-around | stretch | center | flex-start | flex-end
align-items: flex-start | center | flex-end | stretch | baseline
flex-direction: column | row | column-reverse | row-reverse
flex-flow: row wrap
flex-wrap: wrap | no-wrap | wrap-reverse
justify-content: center | flex-start | flex-end | space-around | space-between

Change Order of Flex Items using FlexBox

<div class="flex-container">
<div style="order:3"> 1 </div>
<div style="order:2"> 2 </div>
<div style="order:4"> 3 </div>
<div style="order:1"> 4 </div>
</div>

How to Clone a Github Repo

1. Grab the url from github repo and copy to clipboard
2. Open command prompt
3. Type this at the prompt: git clone
4. Then paste the url from clipboard and press enter
5. Your cloned repo should appear in your user folder in c:drive

Github Commands

INITIALIZE NEW REPO: 
        git init
STAGE FILES:  
        git add .    
COMMIT FILES: 
        git commit -m "My new Repo"
REMOVE DIRECTORY FROM GITHUB REPO BUT NOT LOCAL REPO:
        git rm -r --cached name-of-the-folder
        git commit master
        git push origin master
        Now add the file to .gitignore 
REMOVE PUBLIC DIRECTORY:
        rm -rf public
CLEAR THE CACHE:
        rm -rf  public .cache
GIT STATUS:    
        git status 
CREATE NEW BRANCH:
        git checkout -b  new-branch
PUSH NEW BRANCH TO REMOTE:
        git push -u origin  new-branch
SWITCH BETWEEN BRANCES:
        git checkout branch-name
MERGE NEW BRANCH:
        git checkout main
        git merge new-branch
CLONE REPO + BRANCHES:
        git clone https://github.com/yourusername/your-repository.git
LIST ALL BRANCHES:
        git branch -a
                   
                    
        

Windows Shortcuts

Open emoji panel: (WinKey + semicolon)

View Clipboard: WinKey + v

Open MIC to dictate text: WinKey + h

Select to end of line: shift + end

Replace html tag: alt + w

HTML Special Characters Icons & Symbols

< Less Than     &lt;

> Greater Than     >

/ Backslash     /

( Left Parentheses     (

) Right Parentheses     )

½ One Half     &#frac12;

¼ One Quarter     &#frac14;

⅛ One Eigth    &#frac18;

¾ Three Quarters     &#frac34;

— Long Dash     —

: Colon     :

? Question Mark     ?

_ Underscore     _

+ Plus Sign    +

- Minus Sign     -

@ At Sign     @

& Ampersand     &

# Hash or Pound Sign     #

; Semicolon     &#59;

apostrophe '

</p>     &#60; &#47; p &#62;

<div>     &#60; div &#62;

copyright     ©

Registered trademark     ®

Left arrow     ←

Right arrow     →

Up arrow     ↑

Down arrow     ↓

Long Dash     —

Empty check box     ☐

Checked check box     ☑

Heavy Check Mark     ✔

Ballot-X     ✘

Form Element

<form action="/results-page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
</form>

Video Element

<video width="320" height="240" controls>
    <source src="https://res.cloudinary.com/aggtrans/video/upload/v1593486278/videos/Aggtrans-homepage-truck-video.mp4" type="video/mp4">
</video>

Audio Element

<audio controls>
    <source src="https://res.cloudinary.com/demo/video/upload/du_3.0,so_2.0/ac_mp3,br_44k/docs/firefly-tune.mp3" type="audio/mpeg">
</audio>

DataList Options in Dropdown

<form action="/results-page.php" method="get">
    <label for="browser">Choose your browser from the list:</label>
    <input list="browsers" name="browser" id="browser">
    <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
    </datalist>
    <input type="submit">
</form>

Fieldset Legend Element

<form action="/new-page.php">
    <fieldset>
    <legend>Personal Info:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
    </fieldset>
</form>

Last Update via vanilla javascript

Last Update: <span id="today"></span>
<script>
    const d = new Date();
    document.getElementById("today").innerHTML = d;
</script>

List of Input Types

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">
</pre>

Highlighting or Mark Tag

mark { 
background-color: pink;
color: black;
}
Do not forget to buy milk today.
  

Option Group Dropdown Select List

<form action="/action_page.php">
    <label for="cars">Choose a car:</label>
    <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </optgroup>
    </select>
    <br><br>
    <input type="submit" value="Submit">
</form>

HTML Tags

<article></article>
<aside></aside>
<body>   The body of the page </body>
<blockquote></blockquote>
<br>
<cite>   Defines the title of a work</cite>
<code>   Defines a piece of computer code</code>
<datalist>   Specifies a list of pre-defined options for input controls</datalist>
<details>   Defines additional details that the user can view or hide</details>
<div>   Defines a section in a document</div>
<dfn>   Defintion represents the defining instance of a term</dfn>
<dl>   Defines a description list</dl>
<dt>   Defines a term/name in a description list</dt>
<em>   Defines emphasized text</em>
<embed src="" type="" >    Defines a container for an external (non-HTML) application
<fieldset>   Groups related elements in a form</fieldset>
<figure>   Specifies self-contained content</figure>
<figcaption>   Defines a caption for a <figure> element</figcaption>
<form action=""></form>    Defines an HTML form for user input
<footer></footer>
<head>   Defines information about the document</head>
<header>   Defines a header for a document or section</header>
<hgroup>   Defines a group of headings</hgroup>
<hr>    Defines a thematic change in the content
<html>   Defines the root of an HTML document</html>
<i>   Defines a part of text in an alternate voice or mood</i>
<iframe src="" frameborder="0"></iframe>    Defines an inline frame
<img src="" alt="">    Defines an image
<input type="text">    Defines an input control
<ins>   Defines a text that has been inserted into a document</ins>
<kbd>   Defines keyboard input</kbd>
<label for=""></label>    Defines a label for an input element
<legend>   Defines a caption for a <fieldset> element</legend>
<li>   Defines a list item</li>
<link rel="stylesheet" href="">    Used to link to style sheets
<main>    Specifies the main content of a document</main>
<map name=""></map>    Defines a client-side image-map
<mark>   Defines marked/highlighted text</mark>
<menu>   Defines a list/menu of commands</menu>
<menuitem>   Defines a command/menu item that the user can invoke from a popup menu <menuitem>		
<meta>   Defines metadata about an HTML document>
<meta charset="UTF-8">    Must go in head of document
<meta name="description" content="">    Must go in head of document
<meta name="keywords" content="">    Must go in head of document
<meta name="author" content="">    Must go in head of document
<meter>   Defines a scalar measurement within a known range (a gauge)</meter>
<nav>   Defines navigation links</nav>
<noscript>   Defines an alternate content for users that do not support client-side scripts</noscript>
<object data="" type=""></object>    Defines an embedded object
<ol>   Defines an ordered list</ol>
<optgroup>   Defines a group of related options in a drop-down list</optgroup>
<option value=""></option>    Defines an option in a drop-down list
<output>   Defines the result of a calculation</output>
<p>   Defines a paragraph</p>
<param name="" value="">     Defines a parameter for an object
<pre>   Defines preformatted text</pre>
<progress>   Represents the progress of a task</progress>
<q>   Defines a short quotation</q>
<s>   Defines text that is no longer correct, such as striked text</s>
<samp>   Defines sample output from a computer program</samp>
<script>   Defines a client-side script</script>
<section>   Defines a section in a document</section>
<select name="" id=""></select>	    Defines a drop-down list
<small>   Defines smaller text</small>
<source src="" type="">    Defines multiple media resources for media elements video or audio
<span>   Defines a section in a document</span>
<strong>   Defines important text</strong>
<style>   Defines style information for a document</style>
<sub>   Defines subscripted text </sub>
<summary>    Defines a visible heading for a <details> element </summary>
<sup>   Defines superscripted text </sup>
<table>    Defines a </table>
<tbody> Groups the body content in a table </tbody>
<td>   Defines a cell in a table </td>
<textarea>    Defines a multiline input control (text area) </textarea>
<tfoot>Groups the footer content in a table</tfoot>
<th>   Defines a header cell in a table</th>
<thead>   Groups the header content in a table </thead>
<time>   Defines a date/time </time>
<title>    Defines a title for the document </title>
<tr>   Defines a row in a table</tr>
<track src="" kind="" srclang="en" label="">    Defines text tracks for media elements
<u>   Defines text that should be stylistically different from normal text </u>
<ul>   Defines the head of the unordered list </ul>
<var>    Defines a variable</var>
<video>   Defines a video or movie</video>
<wbr>   Defines a possible line-break </wbr>  The wbr element is not supported in IE.

Code Comments

<!-- HTML Comment --> 
/* This is a css comment */
// Javascript comment

Javascript Array

const fruit = ["Apple", "Grapes", "Oranges" , "Pears"];
console.log(fruit[1]); // Output will be "Grapes"
console.log(fruit[3]); // Output will be "Pears"

Embed YouTube Video in iFrame

[iframe src="http://www.youtube.com/embed/A3PDXmYoF5U" width="100%" height="480"] 

CHANGING AN ARRAY ELEMENT IN JAVASCRIPT

// CHANGING AN ARRAY ELEMENT IN JAVASCRIPT 
//To change the first element from Apple to Banana do this:
const fruit = ["Apple", "Grapes", "Oranges", "Pears"];
fruit[0] = "Banana";  // Changes value of first element in fruit
console.log(fruit[0]);  //logs the value of the first element
// OUTPUT: Banana

Telephone Link tag

<a href="tel:1234567890">Call 123-456-7890 </a>

Email Link Tag

<a href="mailto:mick@mouse.com"> mick@mouse.com </a>

Anchor Tag

<!--Create a bookmark by giving a section of a page a unique name --> 
<h3><a name="top">TOP OF PAGE </a></h3>
<!-- Put this on the page where you want the anchor link -->
<a href="aboutus.html#top">Go to Top of Page</a>

Jekyll Commands

INSTALL JEKYLL
    gem install jekyll bundler
CREATE A GEMFILE
    bundle init
ADD WEBRICK
    bundle add webrick
BUNDLE, BUILD AND SERVE JEKYLL
    bundle exec jekyll serve
BUILD JEKYLL
    jekyll build
SERVE AND WATCH JEKYLL
    jekyll serve --watch
SERVE AND FORCE LIVERELOAD
    jekyll serve --livereload
TROUBLESHOOT JEKYLL
    jekyll doctor
UPDATE DEPENDENCIES
    bundle update
UPDATE GEMS
    gem update --system
CLEAR JEKYLL CACHE
    bundle exec jekyll clean --trace
JEKYLL BUILD with TRACE
    bundle exec jekyll build --trace
BUILD FOR PRODUCTION
    JEKYLL_ENV=production bundle exec jekyll build --trace
UPDATE JEKYLL
    jekyll update
GEM CLEANUP
    gem cleanup
OR
    gem cleanup && gem pristine --all
JEKYLL SERVE THEN OPEN IN BROWSER
    bundle exec jekyll serve --open-url http://localhost:4000/ --trace

Jekyll Liquid Language Helpers

# Include the nav menu from _includes folder:
{%  include nav.html %}
# Display a comment:
{% comment %}
This is a comment
{% endcomment %}
# Show content in page
{{ content }}
# Show page url in page
{{ page.url}}
# URL for local dev:
http://127.0.0.1:4000/
# Front Matter Example
---
layout: master-layout
title: This is the Home Page
description: "The description of this page."
permalink: "/index"
carousel: true
bodyID: "home"
---
# Display Current Date like this: Month Day, Year
{{ site.time | date_to_string: "ordinal", "US" }}

Set Canononical URL in head

<!-- Set Canononical URL --> 
<link rel="canonical" href="https://thestonestore.com/index"/>

Responsive Media Queries for most devices

As recommended by CoderCoder

@media (min-width: 43em){
/* 688px (most phones)*/
}
@media (min-width: 62em){
/* 992px (most tablets and smaller screens) */
}
@media (min-width: 82em){
/* 1312px (most desktops and larger screens)*/
}

Responsive Font Type

See Example in CodePen

Phone Number Formatter

<form>
<input type="text" id="phone" placeholder="(555) 555-5555" />
</form>
<script>
document.getElementById("phone").addEventListener("input", function (e) {
var x = e.target.value.replace(/\D/g, "").match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2]
? x[1]
: "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
});
</script>

Jekyll Cheatsheets & Tutorials

Jekyll Cheatsheet - Devhints

Jekyll Cheatsheet -Cloudcannon

Jekyll Tutorial -Cloudcannon

Quick Reference

htaccess

RegEx Tester

CSS Sprite Generator

Online CSS Tools

Online Javascript Tools

Favicon Generator -online

Online JSON Tools

Online Diff Tool

Aspect Ratio Calculator

Pagespeed: Web Page Speed Resources

• Page Speed Handbook
• Pagespeed Checklist
• Web Speed Test : https://webspeedtest.cloudinary.com
• Chrome Dev Tools : https://developer.chrome.com/docs/devtools/
• Page Speed : https://pagespeed.web.dev/
• Pagespeed tools : https://www.giftofspeed.com/
• Web Page Tester : https://www.webpagetest.org/
• Chrome Lighthouse : https://developer.chrome.com/docs/lighthouse/overview/
• Page Speed : https://web.dev/fast/
• DNS Prefetch

DNS Prefetch Example

<link rel="dns-prefetch" href="https://example.com">

Preconnect Example

<link rel="preconnect" href="https://example.com">

Preload Example

<link rel="preload" as="image" href="header-logo.svg">
<link rel="preload" as="video" type="video/webm" href="intro-video.webm">

Prerender Example

<link rel="prerender" href="blog.html">

Resource Hints - How to Use

dns-prefetch & preconnect are for high priority but indirectly-called third-party domains like CDNs or external plugins.

preload is for high priority but indirectly-called files like above-the-fold CSS background images.

prefetch is for low priority files very likely needed soon, like HTML, CSS or images used on subsequent pages.

prerender is for an entire page that's a very likely subsequent navigation.

Asynchronous CSS For Google Fonts

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL goes here)">

Font Files Examples

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Asynchronous CSS

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">

Online HTML CSS Javascript Editor

Paraphrasing Tool

Image Compressors Online

Lazyload Lqip Images using Cloudinary

<div>
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,w_250,q_auto,e_blur:1500/white_cat.jpg"
data-srcset="
https://res.cloudinary.com/demo/image/upload/f_auto,w_500/white_cat.jpg 500w,
https://res.cloudinary.com/demo/image/upload/f_auto,w_1000/white_cat.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/f_auto,w_1000/white_cat.jpg 1500w,
https://res.cloudinary.com/demo/image/upload/f_auto,w_2000/white_cat.jpg 2000w"
sizes="(max-width: 479px) 100vw, 60vw"
alt="image 1"
class="img lazy">
</div>


<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.5.1/intersection-observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.6/dist/lazyload.min.js"></script>
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
// delay picture switch
load_delay: 2000, // for demo purposes only
// start loading x pixel before intersection
threshold: 0
});
</script>


<style>
.img { position:relative; display:block; width:100%;}
</style>

Load LQIP IMAGES as PLACEHOLDERS for FASTER PERFORMANCE

<img data-src="https://res.cloudinary.com/demo/image/upload/w_40/e_blur,q_1,f_auto,e_grayscale/sheep.jpg"
data-srcset="
https://res.cloudinary.com/demo/image/upload/w_800/q_auto,f_auto/sheep.webp 800w,
https://res.cloudinary.com/demo/image/upload/w_600/q_auto,f_auto/sheep.webp 600w,
https://res.cloudinary.com/demo/image/upload/w_400/q_auto,f_auto/sheep.webp 400w"
title="Sheep" 
alt="Sheep"
class="img-fluid lazy" 
width="800" 
height="auto" 
loading="lazy"
data-sizes="100w">
<figcaption class="mb-2 text-center pt-1">Sheep</figcaption>


<!-- This must be included to Lazyload images with LQIP images -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@18.0.0/dist/lazyload.min.js"></script>
<script>
    var lazyLoadInstance = new LazyLoad({
  });
</script>
    
    
    
    

Display Screen Size Viewport Script JS

This script Will display screen, viewport or window size

<script>
javascript:(function(){var f=document,a=window,b=f.createElement("div"),c="position:fixed;top:0;left:0;color:#fff;background:#222;padding:5px 1em;font:14px sans-serif;z-index:999999",e=function(){if(a.innerWidth===undefined){b.innerText=f.documentElement.clientWidth+"x"+f.documentElement.clientHeight;}else if(f.all){b.innerText=a.innerWidth+"x"+a.innerHeight;}else{b.textContent=window.innerWidth+"x"+window.innerHeight;}};f.body.appendChild(b);if(typeof b.style.cssText!=="undefined"){b.style.cssText=c;}else{b.setAttribute("style",c);}e();if(a.addEventListener){a.addEventListener("resize",e,false);}else{if(a.attachEvent){a.attachEvent("onresize",e);}else{a.onresize=e;}}})();
</script>

Script to Copy Text to Clipboard

<button onclick="myFunction()">Copy text>/button<
<script>
let copyMeInput = document.querySelector('#copyMe');
txInput.addEventListener('input', () =>{
let tx = txInput.value;
copyMeInput.value = tx;
})
function myFunction() {
var copyText = document.getElementById("copyMe");
copyText.select();
copyText.setSelectionRange(0, 999999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>

Best Breakpoints for Websites via Media Queries

@media (min-width: 43em){
/* 688px (most phones)*/
}
@media (min-width: 62em){
/* 992px (most tablets and smaller screens) */
}
@media (min-width: 82em){
/* 1312px (most desktops and larger screens*/
}

Clear Input Field when you click the button

  
  <button onclick="document.getElementById('myInput').value = ''">Clear input field</button>>
  <input type="text" value="Blabla" id="myInput">  
  

Assign a variable to template string

<script>
    const kitty = `My cat ${cat} is ${look}`;
    console.log(kitty);
</script>

Create variables from the key value pairs

<script>
    const {firstName, lastName} = customer;
    console.log(lastName);
</script>

Simple For Loop

  <script>
  //Loop through iterations and add 1 until it gets to 10 then stop
      for(let i = 0; i <= 10; i++){
          console.log(i);
        }
</script>

Simple While Loop

<script>
  //Loop through until it reaches 14 then stop, you must increment the i with i++ or this becomes a never ending loop!
        let i = 0;
        while(i < 15)
        {
          console.log(`While loop: ${i}`);
          i++;
        }
</script>        

ElseIf Conditionals

<script>
      const x = 11;
      if (x === 10) {
        console.log('x is 10');
      } else if(x > 10) {
        console.log('x is greater than 10');
      } else {
        console.log('x is less than 10');
      }
</script>      

Use innerHTML to write into an html element

 <script>
         document.getElementById("demo").innerHTML = 5 + 6;
</script> 

meta refresh or redirect url to another url

<script>
meta http-equiv="Refresh" content="0; url='https://www.newPage'" 
</script> 

Javascript to Add Copyright Info and Year to website footers

  Copyright ©<script>document.write(new Date().getFullYear());</script>  
  All rights reserved | <a href="https://Example.com" class="accent-color" 
  target="_blank"> MyWebsite.com</a>

NPM COMMANDS (NODE.js)

UPDATE NPM TO LATEST VERSION (must open as admin):
    npm install npm@latest
COMPILE SASS:
    npm run dev
REMOVE NODE MODULES FOLDER (from a project):
    rm -r node_modules
UPDATE A DEPENDENCY (EX: to latest version of gulp):
    npm update gulp
INSTALL DIFFERENT VERSION OF DEPENDENCY  (example using lodash):
    npm install lodash@4.17.3 --save
INSTALL A SPECIFIC DEPENDENCY (EX:Install PostCss and PostCss-Cli):
    npm i postcss postcss-cli

BASH OR POWERSHELL COMMAND PROMPTS

CLEAR CACHE FLUSHDNS
    ipconfig /flushdns
STOP FILES FROM COPYING (when freezing)
    cmd /c"echo off|clip
    cmd echo
    cmd ehdddh    
MOVE FOLDERS
Move-Item C:\Users\MickMouse\FolderPath\FolderNametoMove   C:\Users\MickMouse\Dropbox
PRINT LIST OF FILES IN A FOLDER
Open the specific folder in VSCode then open the terminal and type this:
         dir > print.txt
The file named: print.txt should show up in the same folder.
COMMAND LINE FIND FILES OVER 1 MB:
forfiles /S /M * /C "cmd /c if @fsize GEQ 104857600 echo @path" > hugeFiles.txt
BULK DELETE FILES/FOLDERS
Bulk delete files/folders via command line:
1. Open GitBash as Admin:
2. cd into folder where files are you want to delete
3. type this at command prompt: 
    rm -f folderYouWantToDelete/*/*/

Search Methods via Windows Explorer

  FIND BY DATE MODIFIED:  
    datemodified:yesterday
FIND WORD WITHIN A WEBSITE:
    site:aggtrans.com pavers
FIND HUGE PHOTOS (Find pictures that are greater than 10mb)
    type:jpg AND size: >10mb
FIND WORDS WITHIN FILENAMES:   
Files whose names contain the word "rabbit" or the characters rabbit as part of another word (such as "rabbit" or "procedure"). The ~= means "contains."
    FileName:~="rabbi"
    FileName:~="kitchen" kind:html
    FileName:~="techo" AND kind:jpg AND size:>500kb
    kind:jpg AND size:>300kb
FIND jpg Files whose names contain the numbers "2079"
    FileName:~="2079" AND kind:jpg
FIND jpg files whose names contain "rc" and are larger than 1mb
    FileName:~="rc" AND kind:jpg AND size:>1mb
FIND jpg files created before 2010 and larger than 2mb
    type:jpg AND DateCreated:<2010 AND size:>2mb
FIND BY TAGS: tags:fireplace OR filename:rabbit AND size:huge OR size:>500kb
    FileName:~="crushed" AND kind:jpg AND size:>500kb
    type:html name: *fancybox*
    kind:picture size:>999kb
    FileName:~="fancybox" AND "html"
    FileName:~="composer" AND "txt"
    name:composer kind:txt

Helpful DEV Sites

    https://www.markdownguide.org/basic-syntax/

Quick Website Checklist

Best Practices for Fast Websites

QUICK WEBSITE CHECKLIST
☐ Make approximate crops for your mobile and desktop. See: *1* Cropping Images
☐ Convert your images to WEBP format. See *2* 
☐ Compress your images and save them to your images folder to replace all your old images. See *3* 
☐ Lazy load all images below the fold with the loading="lazy" atrribute (except the LCP image - do not lazyload it) See *4*
☐ Add "decoding="async" to every single image tag on your site. See *5*
☐ Preload critical above-the-fold images and LCP images and the logo . See *6*
☐ Lazyload background images. See *7*
☐ NEVER Lazyload the LCP image but do PRELOAD the LCP image.
☐ Make sure all images have their height and width attributes properly filled in.
☐ Make sure you have your alt tags filled in. SEE *13*
☐ Optimize your fonts. See *8*
☐ Minify and compress css and javascript. see *10*
☐ Strive for tiny bundles: JS >11kb and CSS >51kb
☐ Check for C.L.S. by running Lighthouse. See *9*
☐ Add Google Analytics so it isnt render blocking. See *10*
☐ Use SVGs wherever possible (be sure to optimize them) See: *10*
☐ Defer non-essential JavaScript. See *10*
☐ Remove third party scripts. See *10*
☐ Create a critical css stylesheet, then defer loading remaining scripts. See *11*
☐ Verify all links are working
☐ Optimize for accessibility WebAim. see *12*
☐ Include meta tags in head
☐ Set loading="lazy" OR loading="eager" on images

Convert Images to WEBP for faster loading

ONLINE CONVERTERS

• Image to Webp
• Convertio
• CloudConvert.com

Convert Images to WebP Using the WEBP Tools for Windows

To Download the WebP Tools for Windows:
1. Visit the WebP download page on the Google Developers website.
2. Scroll down to the “Windows” section and download the Windows binaries (ZIP archive) for both cwebp and dwebp.
3. Extract the contents of the ZIP archive to a folder on your computer.
4. Add the WebP Tools to Your System Path:
To use the WebP tools from any location in the command prompt, you need to add their folder to your system’s PATH environment variable.
Follow these steps:
5. Open the Start menu and search for “Environment Variables.”
Click on “Edit the system environment variables.”
6. In the System Properties window, click the “Environment Variables…” button.
7. Under System variables, find the “Path” variable and click “Edit…”.
8. Click “New” and add the path to the folder where you extracted the WebP tools (e.g., C:\path\to\webp-tools).
9. Click OK to save the changes.
10. Open a Command Prompt (CMD) or PowerShell:
Press Win + R, type “cmd”, and press Enter to open the command prompt. Alternatively, you can use PowerShell if you prefer.
11. Test the WebP Tools:
In the command prompt, type the following commands to verify that the tools are working:
    cwebp -version
    dwebp -version
12. If you see version information for both tools, they are correctly installed and accessible from the command line.
Using cwebp and dwebp:
1. To convert an image to WebP, use the cwebp command. For example:
    cwebp input.jpg -o output.webp
2. To convert a WebP image to another format (e.g., PNG), use the   dwebp command:
    dwebp image.webp -o image.png
3. Remember to replace “input.jpg” and “image.webp” with the actual filenames and adjust the quality settings as needed. Now you’re all set to work with WebP images on your Windows PC! 

Compress Your Images

Bulk compress and download images

Better LCP Images using Fetch Priority

The fetchpriority attribute can be used to signal to the browser that a file should be treated differently from its default behavior

   <img
    src="dog.jpg"
    loading="eager"
    fetchpriority="high"
    width="4751"
    height="3002"
    alt="A cute dog">

Other LCP Tips

1. Never lazy-load your LCP image.
2. Default to your server-rendered HTML and images for key content above the fold.
3. Consider using a high fetch priority if your LCP image is easy to identify.
4. Reserve space for your images so that they do not cause layout shift when they load. See: https://www.tezify.com/how-to/avoid-large-layout-shifts/

Fixing Issues with Cumulative Layout Shift (CLS)

1. Inline (embed in the head) the CSS
2. Minify the embedded css
3. Move inline scripts to the bottom of the page.
4. Minimize the html
5. Never lazyload above-the-fold images
6. Minify the css and js ( see: https://github.com/matthiasmullie/minify)
7. Change image formats to WEBP
8. Make your elements appear inside a container that is position: fixed
9. Always set height and width attributes on images
10. Wrap the image in aspect-ratio containers

Aspect Ratio Containers for Preventing CLS

    <style>
        .content-16x9 {
            aspect-ratio: 16 / 9;
            width: 100%;
            object-fit: cover;
        }
        </style>

<picture class="content-16x9">
    <!-- Mobile -->
    <source media="(min-width: 580px)"
    srcset="example-516w.jpg">
    <!- Sm Tablet  -->
    <source media="(min-width: 780px)"
    srcset="example-696x392.jpg">
    <!- Lg Tablet -->
    <source media="(min-width: 1000px)"
    srcset="example-936×527.jpg">
    <!- Sm Laptop  -->
    <source media="(min-width: 1200px)"
    srcset="example-1116×628.jpg">
    <!- Desktop  -->
    <source media="(min-width: 1400px)"
    srcset="example-1296×729.jpg">
    <!-- Fallback Image -->
    <img aria-hidden="true" 
        loading="lazy"
        decoding="async"
        src="example-1296×729.jpg"
        width="1296" height="729"
        title="Default Image"
        alt="Default Image">
</picture>

Safe Links for target=blank

    <a href="#" target="_blank"  rel="noopener noreferrer">Im a safe link</a>

Markdown Syntax

    # Heading 1
    ## Heading 2
    ### Heading 3
    **BoldText**
    *italicized text*
    ***BoldItalic***
    BLOCKQUOTE: 	> 
    IMG LINK: 	[Link title](https://www.example.com)
    IMG ALT:  	![img alt text](image.jpg)
    CODE:		`code`
    HORZ RULE 	---  
    HIGLIGHT:  	==very important words==.
    SUBSCRIPT:	H~2~O  
    SUPERSCRIPT:	X^2^  
    HEADING ID:	### My Great Heading {#custom-id}
    __ Bold with italics __
    - List Item
    - Another list item
    URL LINKS
    
    [The Stone Store](https://thestonestore.com)
    IMAGES
    ![My Image](./img/myImage.JPG)

File Sizes

1024 KB = 1 MB
1024 MB = 1 GB

Faster Fonts

How to optimize your fonts

How to lazyload your background Image

Google Fonts Helper

Fixing Flash of Unstyled Content

Remove Extra Lines from your code

Place this in the search box of your text editor and then replace it with nothing (an empty string).

^\s*\n

Convert Pixels to Rems

  PX to REM
  400px = 25rem 

  600 = 37.5 

  800 = 50 

  1000 = 62.50 

  1200 = 75 

  1500px = 93.75 rem 

  

CSS Grid

  
SAMPLE GRID CONTAINER:  
        .grid-container {
          display: grid;
          column-gap: 50px;
          grid-template-columns: auto auto auto;
          background-color: dodgerblue;
          padding: 10px;
        }
CSS GRID PROPERTIES:
        align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly
        align-items: stretch|center|flex-start|flex-end|baseline
        align-self: stretch|center|flex-start|flex-end|baseline
        display: inline|inline-block|block|flex|contents|inline-flex|grid|inline-grid|none
        column-gap: 30px|5rem|10%
        gap (rows columns): 20px 70px| 2rem 20rem