/ehw-starter-tut-prj

STARTER REPO for coding projects (created 2024)

Primary LanguageHTML

!!! NOTE: This STARTER README has a variety of section; after you've forked / cloned this repo, keep what you need and delete the rest!

Tutorial Name Custom Elementor Widget: Simple Example
Platform Website
Channel Elementor Developers
Course/Tut Year 2022
File Name README.md
Date Created 12/28/23
Date Modified --
Version 0.0.1
Programmer / Student Eric Hepperle

TUTORIAL / COURSE URL

GITHUB REPO

TECHNOLOGIES

HTML5

CSS3

WordPress

Elementor

Git

GitHub

JavaScript

GitHub



Tutorial Video Screenshot


Instructor Info

Instructor pic

Elementor Developers

Elementor is packed with dozens of useful widgets in the widgets panel. These widgets are divided into categories. Each widget has a set of custom controls (input fields) allowing end-users to enter data.

TAGS

WordPress Elementor Widgets Custom Widgets Code From Scratch WP Plugins Elementor Developers Custom Plugins oEmbed WordPress ACF Advanced Custom Fields Custom Post Types WP Post Meta Plugins LinkedIn Learning WordPress Elementor Widgets Custom Widgets Code From Scratch WP Plugins TechiePress Custom Plugins JavaScript Async-Await Playwright Coding Scraping JavaScript Async Ajax Requests XMLHttpRequest (XHR) async/await ES6 callbacks promises setTimeout() JavaScript ES6 Fetch API RSS XML Parsing Traffic Rotator Raddy

Purpose

Tutorial Work: Learn how to build a custom Elementor widget plugins for WordPress. Tutorial Work: Learn how to manipulate XML data using JavaScript by creating an RSS traffic rotator, step-by-step.

Requires

  • WordPress installed
  • Login to WordPress dashboard
  • IDE like VSCode

Description:

Complete working example custom Elementor widget plugin identified as "Simple Example":

Putting all these pieces together, we're going to create a simple Elementor widget which will use the native oEmbed functionality (opens new window)of WordPress to auto-embed content from external sites using simple URLs.

TIP: the settings.json in .vscode/ folder is key to getting the SASS -> CSS compile to work.

Folder Structure

├───.vscode
├───ehw-notes
│   ├───css
│   ├───docs
│   └───img
├───ex-files
└───_sb

Purpose

Course Work: JavaScript: Async.

Requires

  • Browser with dev tools enabled OR
  • IDE (VSCode preferred) with nodejs installed

COURSE INFO:

Instructor

Course Details

  • Course Duration: 1h 31m
  • Experience Level: Intermediate
  • Updated: 10/26/2021

Course Description:

Asynchronous code is the foundation of most modern web experiences. It allows programs to switch between tasks and juggle multiple requests. However, without a thorough understanding of asynchronous programming, developers can write bloated code that works against the architecture of the web. Join Sasha Vodnik in this course, which explores asynchronous approaches to JavaScript programming using callbacks, promises, and the async/await operators in ES6. Learn what's going on line by line in your code, revisit basic structures like XMLHttpRequest (XHR) objects and setTimeout(), and discover how to use the new syntax options in JavaScript to tackle any coding challenge.

Skills Covered

Purpose

Course Work: Learn WordPress custom post types and taxonomies.

Requires

  • WordPress installed
  • Login to WordPress dashboard
  • Do all code in the wp-content folder

Course Details

Course Duration 1h 28m
Experience Level Advanced
Released 6/24/2019

Concepts Covered:

  • What the fetch API is
  • How to use the fetch API
  • Parsing XML with JavaScript fetch API
  • Consuming / Parsing XML with fetch

Materials/References:

Sample Code from Tutorial:

Sample Code PLACEHOLDER

Usage:

  1. CD to project folder in a shell terminal
  2. Run npm start
  3. Launch http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.

Sample results:

Sample Results PLACEHOLDER

Requires:

  • A web browser.

Demonstrates:

  • JavaScript
  • Fetch API
  • XML Parsing
  • RSS

Based on this tutorial:

VOCAB:

  • Tutwrk: This is term I use to indicate the work I did when following a tutorial. This term is differentiated from tutorials I may create/author in the future that will be designated with the term "Tutorial".

Resources:

  • N/A

Settings:

!!! #### #TIP: the settings.json in .vscode/ folder is key to getting the compile to work.

settings.json for Live Sass Compiler:

{
  "liveSassCompile.settings.formats": [
      {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "/css/",
      },
      {
          "extensionName": ".min.css",
          "format": "compressed",
          "savePath": "/css/",
      }
  ],
  "liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": ["defaults"],
  "liveSassCompile.settings.partialsList": [
    "/**/_*.s[ac]ss"
  ],
}

WordPress Theme style.css Comment Block:

Create comment block as follows:

Field Value Purpose
Plugin Name: Alecaddd Plugin
Plugin URI: http://alecaddd.com/plugin The website that the plugin calls home
Description: This is my first attempt to write a custom Plugin for this amazing tutorial series. Describe the plugin
Version: 1.0.0 Version number
Author: Alessandro "Alecadd" Castellani Author name
Author URI: http://alecaddd.com When the user clicks the author name, this is the website it will take them to
License: GPLv2 or later Use open source license
Text Domain: alecadd-plugin Same as folder name

PURPOSE

Learn to use Playwright to automate our scraping, screenshotting, and testing needs by following tutorial by YouTube channel LearnWebCode.

Tutorial Info

Tutorial Info:

PLUGINS & DEPENDENCIES

  • Playwright: enables reliable end-to-end testing for modern web apps
  • NodeJS: Node.js lets developers use JavaScript to write command line tools and for server-side scripting

USAGE

  • Type node then the name of the script:
node scrape-weather.js

node my-browser-script.js

NOTES

Notes are located in ./notes/main.md

RESOURCES & REFERENCE