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/

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>
  <source media="(min-width: 580px)"
    srcset="example-516w.jpg">
    
    <source media="(min-width: 780px)"
    srcset="example-696x392.jpg">
    
    <source media="(min-width: 1000px)"
    srcset="example-936×527.jpg">
    
    <source media="(min-width: 1200px)"
    srcset="example-1116×628.jpg">
    
    <source media="(min-width: 1400px)"
    srcset="example-1296×729.jpg">
    
    <img src="example-1296×729.jpg"
    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%;
height: auto;
}

Adjust Letter Spacing via CSS

 .tightLetters { letter-spacing: -1px;}

Letter Spacing Using Inline CSS

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

Adjust Word Spacing via CSS

 .wordSpace { word-spacing: -2px;}

Adjust Word Spacing via inline CSS

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

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"

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

HTML Special Characters Icons & Symbols

< Less Than     &#60;

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

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

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

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

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

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

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

Flush DNS

ipconfig /flushdns

Copy All Files from One Place to Another Place

Open command prompt with admin privs, then type something like this:

  ROBOCOPY "C:\Users\YourName\FOLDER1\FOLDER2\FOLDER3"  "G:\FOLDER1\FOLDER2\FOLDER3" /mir

Display Objects as Strings using Javascript

  <p id="demo"></p>
<script>
    const person = {
      name: "John",
      age: 30,
      city: "New York"
    };
    
  document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>