Category: CSS

HTML Fun & Random Tutorial

HTML Fun & Random Tutorial

    I wash watching a show and it had a scene with a challenger board that had a honeycomb pattern in it with a gradient. I randomly thought to myself that I could do that with HTML and even animate it if I wished. So, for giggles, I decided to do just that and make a quick tutorial about it.

naruto_challenger_board
naruto_challenger_board

Thought Process

    Let’s first cover my thought process. I immediately thought that I could do this with a PNG that had a honeycomb pattern. It’s cells would be black with the lines being transparent. From there, I could use CSS’s linear-gradient to get the two colors in the image. Doing some googling got me a tillable honeycomb image but I did have to use Gimp to get the transparent parts and color exchange from white to black. Here is the end result of that: Honeycomb Image From there all I had to do was get two divs and set one of the with the image as the background and the other as a linear-gradient. OK, so we are set with the logic. Let’s look at the CSS.

CSS

    The CSS is pretty straightforward. We first make sure that the entire page is filled when we have our elements in it. So, we set padding and margins to zero for the html and body tags. We then define some base parameters for our two core div elements. I identafy them with IDs and they are overElm and underElm. We simply set their width and height settings to 100%. In addition, we set their positions fixed so that we can use z-index to place them in the proper top and bottom order.

    Now, the overElm has its background set to url(“honeycomb.png”); and repeat is set for both x and y ordinates. Then, underElm has its z-index set to -100 to make certain it is below overElm. That covers the CSS section. We will do one other CSS related thing but it will be referenced in our JavaScript section. Let’s cover our body tabs we need.

html, body {
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
}

#overElm, #underElm {
     width: 100%;
     height: 100%;
     position: fixed;
}

#overElm {
     background-image: url("honeycomb.png");
     background-repeat: repeat;
}

#underElm {
    z-index: -100;
}

Tags

    This part is super straightforward and so we an quickly go to the JavaScript section in a moment. Here is the breakdown. We have two div tags and they each have their respective IDs. See? Easypeasy. See below:

<div id="overElm"></div>
<div id="underElm"></div>

JavaScript

    OK, this is the most meaty part of the logic. We are going to use the setInterval JavaScript function and to create the animation. In addition, we will check to see if we want an animation at all. Before we do this we want to create a number of variables for use.

First, we get the element reference for underElm. Then, we create two color variables to be used in our linear-gradient setting. In addition, we create two color percent variables in order to drive how much gradient there actually is. Here we will use 50% for both so that they equally consume space and that there actually isn’t any gradation.

We also will create a degree variable and interval rate variable. Interval rate will dictate if we want to have a static color split or animated one. From there, we setup an if check and see if our interval rate is less than 0. If it is, it sets a static linar-gradient. Or if greater than, it will animate via the setInterval function. We pass our arguments to it for usage. And we are done! You can chnge the clors, its opacity, speed, and more to get a cool look for an HTML page or even video if you manage it right. Full code and video is below.

var elm = document.getElementById("underElm");
var color1        = "#09c759";
var color2        = "#c82f46";
var color1Percent = "50%";
var color2Percent = "50%";
var degInt        = 45;
var intervalRate  = -1;  // - number means do static than intervaled degree change
                         // 20 is nice and fast  500 is gradual and lower

if (intervalRate < 0) {
    elm.style.background = "linear-gradient(" + degInt + "deg,"
                           + color1 + " " + color1Percent +","
                           + color2 + " " + color2Percent + ")";
} else {
    var interval = setInterval(function () {
        elm.style.background = "linear-gradient(" + degInt + "deg,"
                               + color1 + " " + color1Percent +","
                               + color2 + " " + color2Percent + ")";

        degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

    }, intervalRate, elm, color1, color1Percent,
                          color2, color2Percent);
}

Full HTML & Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Honeycomb Gradient</title>

        <style media="screen">
            html, body {
                margin: 0em 0em 0em 0em;
                padding: 0em 0em 0em 0em;
            }

            #overElm, #underElm {
                width: 100%;
                height: 100%;
                position: fixed;
            }

            #overElm {
                background-image: url("honeycomb.png");
                background-repeat: repeat;
            }

            #underElm {
                z-index: -100;
            }
        </style>
    </head>
    <body>
        <div id="overElm"></div>
        <div id="underElm"></div>

         <script type="text/javascript">
             var elm           = document.getElementById("underElm");
             var color1        = "#09c759";
             var color2        = "#c82f46";
             var color1Percent = "50%";
             var color2Percent = "50%";
             var degInt        = 45;
             var intervalRate  = -1; // - number means do static than intervaled degree change
                                     // 20 is nice and fast  500 is gradual and lower

             if (intervalRate < 0) {
                 elm.style.background = "linear-gradient(" + degInt + "deg,"
                                        + color1 + " " + color1Percent +","
                                        + color2 + " " + color2Percent + ")";
             } else {
                 var interval = setInterval(function () {
                     elm.style.background = "linear-gradient(" + degInt + "deg,"
                                            + color1 + " " + color1Percent +","
                                            + color2 + " " + color2Percent + ")";

                     degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

                 }, intervalRate, elm, color1, color1Percent,
                                       color2, color2Percent);
             }

         </script>
    </body>
</html>

Video

Email-to-SMS Gateway List With Setup & Code Example

Email-to-SMS Gateway List With Setup & Code Example

email_to_sms
email_to_sms

    For personnel projects, one might need to send a message to a phone to give updates or alerts. This can be done relatively easily by using PHP and its “mail()” command. But, we need to know what gateway to send it to and what the number is. The number part is easy but gateways vary. So, here is a reference list of Email-to-SMS Gateways. In addition, there is a quick code reference part to help get the ball rolling. As a final point before starting, you will need a proper mailing system and FQDN to make sure messages get through. Some gateways are highly fickle and you might not always get the SMS sent through using this setup. So, don’t use this in a commercial context unless you do the aforementioned.

Code Reference:

    First, you’ll need the program “mail()” uses to send messages. In a terminal do:

sudo apt-get install sendmail

Then, edit the host file found at /etc/hosts. You’ll have something like this at the top: 127.0.0.1 localhost. You need it to be setup the proper FQDN syntax; so, something like this: 127.0.0.1 localhost.example.com is needed. After all that is setup (You might need to reboot.) you simply need to insert into a PHP script the following:

$number = "[email protected]";
$subject = "Your sybject message here.";         // Not used in text messages per say
$tmessage = wordwrap("Your message here.", 70 );

mail($number, $subject, $tmessage);

Gateway List:

Cell CarrierEmail Domain
AT&T Enterprise Pagingpage.att.net
AT&T Wirelesstxt.att.net
Alaska Communication Systemsmsg.acsalaska.com
Alltel text.wireless.alltel.com
Now part of AT&T
Australia T-Mobile/Optus Zoo (Optus)optusmobile.com.au
Appears they charge for the service
Bell Mobility & Solo Mobiletxt.bell.ca
Bluegrass Cellularsms.bluecell.com
Boost Mobilemyboostmobile.com
Cellcomcellcom.quiktxt.com
Cellular South (C Spire)cellularsouth1.com
(now cspire1.com)
Centennial Wirelesscwemail.com
Cincinnati Bellgocbw.com
Cingularcingular.com
Merged with AT&T Mobility 2007
Cingular Prepaidcingulartext.com
Cox WirelessDiscontinued 2012
Cricket Wirelessmms.cricketwireless.net
Digicel St. Luciadigitextlc.com
Fidofido.ca
Google VoiceNot an actual carrier
GCI Alask Digitel (GCI)mobile.gci.net
IV Cellular (Illinois Valley Cellular)ivctext.com
i wireless (iWireless)iwspcs.net (T-Mobile)
iwirelesshometext.com (Sprint PCS)
Koodo Mobilemsg.telus.com
Limetxt2lime.com
Metro PCSmymetropcs.com
MobilicityNo email-to-SMS service
MTS Mobilitytext.mtsmobility.com
NET10Determine NET10’s carrier
Nex-Techsms.nextechwireless.com
nTelospcs.ntelos.com
Will change to Sprint early 2016
O2 (M-mail)mmail.co.uk
O2 Powered Networks 
O2 UKo2imail.co.uk
Optusoptusmobile.com.au
Appears they charge for the service
Orangeorange.net
PC Telecommobiletxt.ca
PTel Mobiletmomail.net
Pioneer Cellularzsend.com
Pocket Wirelesssms.pocket.com
Republic Wirelesstext.republicwireless.com
Rogers Wirelesspcs.rogers.com
SaskTelsms.sasktel.com
Sprintmessaging.sprintpcs.com
Straight TalkDetermine Straight Talk’s carrier
Syringa Wirelessrinasms.com
T-Mobiletmomail.net
T-Mobile UKt-mobile.uk.net
Telstraonlinesms.telstra.com
Telus Mobilitymsg.telus.com
Threethree.co.uk
TracfoneDetermine Tracfone’s carrier
US Cellularemail.uscc.net
Unicelutext.com
Verizonvtext.com
Viaeroviaerosms.com
Virgin Mobilevmobl.com
Virgin Mobile Canadavmobile.ca
Virgin Mobile UKvxtras.com
VodafoneNo email-to-SMS service
Wind Mobiletxt.windmobile.ca

Check out my article regarding test servers so you can test this out properly!


Servers
Quick Test Server

HTML, CSS, JavaScript Useful Cheat Sheet!

HTML, CSS, JavaScript Useful Cheat Sheet!


To Top


To Bottom

Web Technologies
Web Technologies

    I love web technologies because they provide a quick return on interest (ROI) and for the beginner gives immediate feedback in terms of accomplishment and sense of progress. There are many frameworks that one can use for a web based project but knowing the base elements these frameworks are comprised from is still important. Here is a reference list/cheat sheet of some of the most common HTML tags, CSS, and JavaScript one will likely use. This is great for Web Devs, Web Admins, coders, programmers, and the like.

HTML Tags

    Most HTML tags are setup as open and close tags. This means that most tags are a pare/set and denote where they start and end. The end tag has a forward slash (/) to indicate the tag is the end tag.

<tag>Stuff in tag...</tag>
(open tag)content(/end tag)

<!--Some tags end like this-->
<tag/>

<div>

    Div tags are considered devision tags and are used to section data on a page. CSS will then be used to style the tag by setting its position, setting the background color, setting the text color, etc. Think of the div as a container and your scaffolding for the page. Div tags are block elements.

<p>

    The P tag stands for paragraph tag and this is like a sub container for the div tag. It often holds text but can contain images, links, and other non-block tags. Browsers will automatically add some space (margin) before and after each <p> element. This behavior can be modified with CSS using the margin properties. P tags are block elements.

<span>

    The span tag is pretty much like the div tag. The difference between the two is that div is a block element which puts it on a separate line. A span tag, however, is an inline element, meaning that it can be on a line with other elements.


<img>

    The img tag stands for images. People like images and I like images.

<img src="https://www.itdominator.com/wp-content/uploads/2017/07/wp-cli.jpg" alt="If image doesn't render, this text will show instead." />

<a>

    Anchor tags link to parts on the same page or to new pages entirely. They are essentially links.

<!--To an external page...-->
<a href="http://www.google.com" target="_blank">Google</a>

<!--This will jump to the content that is wrapped with another anchor tag on the same page.-->
<a href="#colors">Colors</a>

<a name="colors">
<p>Colors are cool. The primary colors are red, green, and blue.</p>
</a>

<table>

    Table is a block element that denotes there will be sub elements of th, tr, td. There are others but these are the core parts. Th stands for table header and
is inset within a tr (table row). Tr is table row which makes a row for the table. Td is table data which is like a column and is inset in a table row too.

border-collapse: separate (default):

FirstnameLastname
TomGar
LoisGriffin

border-collapse: collapse:

FirstnameLastname
PeterGriffin
LoisMatt

form

    A form is used to submit data to the server. There are many form objects one can use. Below is a table covering all HTML5 form objects and their code and examples.

ObjectPreview HTML 5 code
Label

<label>Texte</label>
Button

<input type=”button” name=”name” value=”Bouton”>
Image button


<input type=”image” src=”image/bimage.jpg”>
Text field

<input type=”text” name=”text” value=”empty”>
Password

<input type=”password” name=”monpass” value=”12345″>
Date

<input type=”date” name=”date” value=”<?php echo $today?>”>
Date and time

<input type=”datetime” name=”time” value=”<?php echo $now?>”>
Time<time>2013-06-27</time>
Number

<input type=”number” name=”num” value=”12345″>
Color

<input type=”color” name=”color” value=””>
Search input

<input type=”search” name=”” list=”datalist” value=””>
Data
Dix
<data value=”10″>Ten</data>
Check box

<input type=”checkbox” name=”checkbox1″ value=”checkbox”>
Radio group



<label>Choice 1
<input type=”radio” name=”radio1″ value=”radio1″>
</label>
<label>Choice 2
<input type=”radio” name=”radio1″ value=”radio2″>
</label>
Textarea

<textarea name=”textarea”>content</textarea>
Range


<input type=”range” min=”-100″ max=”100″
value=”0″ step=”2″ name=”power” list=”powers”>
<datalist id=”powers”>
<option value=”0″>
<option value=”-30″>
<option value=”30″>
<option value=”+50″>
</datalist>
Data listTo be used with input
<datalist id=”identifier”>
<option value=”1″>
<option value=”2″>
<option value=”3″>
</datalist>
Select

<select name=”select”>
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Select list

<select name=”select2″ size=”3″>
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Menu

  • New
  • Open
  • Save
  • <menu type=”context”>
    <li>New</li>
    <li>Open</li>
    <li>Save</li>
    </menu>
    Toolbar

  • <menu type=”toolbar”>
    <li><button type=”button” onclick=”fnew()”>New</button></li>
    <li><button type=”button” onclick=”fopen()”>Open</button></li>
    <li><button type=”button” onclick=”fsave()”>Save</button></li>
    </menu>
    Combo box


    <input type=”text” list=”comboid”>
    <datalist id=”comboid”>
    <option value=”0″>
    <option value=”-30″>
    <option value=”30″>
    <option value=”+50″>
    </datalist>
    File upload

    <input type=”file” name=”file”>
    Image & caption

    Caption

    <figure>
    <img src=”image/image.gif”>
    <figcaption>Caption</figcaption>
    </figure>
    Fieldset
    Title

    …Content…

    <fieldset>
    <legend>Title </legend>

    <p>Content</p>
    </fieldset>
    Output

    <output onforminput=”value = 2 + 2″></output>
    Meter
    12 units
    <meter min=0 max=24 value=12>12 units</meter>
    Progress 0%
    <progress id=”prog” max=100>
    Summary

    Overview
    term
    definition

    <details>
    <summary>
    Presentation
    </summary>
    <dl>
    <dt>term</dt>
    <dd>definition</dd>


    </dl>
    </details>
    Submit button

    <input type=”submit” name=”submit” value=”Submit”>
    Clear/Reset button

    <input type=”reset” name=”clear” value=”Clear”>

    HTML Entities

        HTML entities are used in place of reserved characters in HTML. Characters that are not present on your keyboard can also be replaced by entities as well. The most common are listed in a table below.

    ResultDescriptionEntity NameEntity Number
    non-breaking space&nbsp;&#160;
    <less than&lt;&#60;
    >greater than&gt;&#62;
    &ampersand&amp;&#38;
    double quotation mark&quot;&#34;
    single quotation mark (apostrophe)&apos;&#39;
    ¢cent&cent;&#162;
    £pound&pound;&#163;
    ¥yen&yen;&#165;
    euro&euro;&#8364;
    ©copyright&copy;&#169;
    ®registered trademark&reg;&#174;

    HTML Notes

    Recommended Default HTML Markup Before Content Is Added

    <!DOCTYPE html> <!--Tells a browser its an html page-->
    <html lang="en">
    <head>
      <meta charset="utf-8">  <!--Encoding model-->
      <title>Title seen on its tab</title>
      <link rel="stylesheet" href="/css/master.css"> <!-- Attach CSS through a path -->%MINIFYHTML2c7b6d576ce0e0ee81ccf64ed9ff27465%</head>
    <body>
    
    <!-- content goes here... -->
    
    
    <script src="resources/scripts/script.js" charset="utf-8"></script>  <!-- Attach Javascript File through path -->
    </body>
    </html>
    

    Block Elements

        In general, HTML elements can be divided into two categories : block level and inline elements. HTML block level elements can appear in the body of an HTML page. It can contain another block level as well as inline elements. By default, block-level elements begin on new lines. Block level elements create larger structures (than inline elements).

    • p
    • h1, h2, h3, h4, h5, h6
    • ol, ul
    • pre
    • address
    • blockquote
    • dl
    • div
    • fieldset
    • form
    • hr
    • noscript
    • table

    Inline Elements

        HTML inline elements can appear in the body of an HTML page. They can contain data and other inline elements. By default, inline elements do not begin on new lines. Inline elements create shorter structures (than block elements).

    • b, big, i, small, tt
    • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
    • a, bdo, br, img, map, object, q, script, span, sub, sup
    • button, input, label, select, textarea

    Margins

        Margins are the spacing around an element.

    This span tag has 2em margin set…

    Padding

        Padding is the spacing internal to an element and its “walls”.

    This span tag has 2em padding set…

    CSS

    Examples/Logic

    SelectorExampleExample description
    .class.introSelects all elements with class=”intro”
    #id#firstnameSelects the element with id=”firstname”
    **Selects all elements
    elementpSelects all <p> elements
    element,elementdiv, pSelects all <div> elements and all <p> elements
    element elementdiv pSelects all <p> elements inside <div> elements
    element>elementdiv > pSelects all <p> elements where the parent is a <div> element
    element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements
    element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element
    [attribute][target]Selects all elements with a target attribute
    [attribute=value][target=_blank]Selects all elements with target=”_blank”
    [attribute~=value][title~=flower]Selects all elements with a title attribute containing the word “flower”
    [attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with “en”
    [attribute^=value]a[href^=”https”]Selects every <a> element whose href attribute value begins with “https”
    [attribute$=value]a[href$=”.pdf”]Selects every <a> element whose href attribute value ends with “.pdf”
    [attribute*=value]a[href*=”w3schools”]Selects every <a> element whose href attribute value contains the substring “w3schools”
    :activea:activeSelects the active link
    ::afterp::afterInsert something after the content of each <p> element
    ::beforep::beforeInsert something before the content of each <p> element
    :checkedinput:checkedSelects every checked <input> element
    :disabledinput:disabledSelects every disabled <input> element
    :emptyp:emptySelects every <p> element that has no children (including text nodes)
    :enabledinput:enabledSelects every enabled <input> element
    :first-childp:first-childSelects every <p> element that is the first child of its parent
    ::first-letterp::first-letterSelects the first letter of every <p> element
    ::first-linep::first-lineSelects the first line of every <p> element
    ype.asp”>:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
    :focusinput:focusSelects the input element which has focus
    :hovera:hoverSelects links on mouse over
    sp”>:in-rangeinput:in-rangeSelects input elements with a value within a specified range
    :invalidinput:invalidSelects all input elements with an invalid value
    :lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)
    sp”>:last-childp:last-childSelects every <p> element that is the last child of its parent
    ype.asp”>:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
    :linka:linkSelects all unvisited links
    :not(selector):not(p)Selects every element that is not a <p> element
    sp”>:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent
    hild.asp”>:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child
    f-type.asp”>:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
    ype.asp”>:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
    ype.asp”>:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
    sp”>:only-childp:only-childSelects every <p> element that is the only child of its parent
    :optionalinput:optionalSelects input elements with no “required” attribute
    ange.asp”>:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
    sp”>:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified
    sp”>:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified
    :requiredinput:requiredSelects input elements with the “required” attribute specified
    :root:rootSelects the document’s root element
    ::selection::selectionSelects the portion of an element that is selected by a user
    :target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
    :validinput:validSelects all input elements with a valid value
    :visiteda:visitedSelects all visited links

    IDs

        ID selectors are supposed to be unique within the HTML document. When queried with JavaScript it should return a single element but it can return an array/list if the web developer set the document with multiple IDs of the same type. Standards dictate this is poor form if done.

    <!-- The IDs are arbitrary. -->
    
    <div id="left-container"> <!-- Content --> </>
    <div id="middle-container"> <!-- Content --> </>
    <div id="right-container"> <!-- Content --> </>
    

    Classes

        Class selectors don’t have to be unique within the HTML document. When queried with JavaScript it usually returns an array/list.

    <!-- The Class is arbitrary. -->
    
    <div class="book"> <!-- Content --> </>
    <div class="book"> <!-- Content --> </>
    <div class="book"> <!-- Content --> </>
    

    CSS Button Generator Button Generator

        Quickly make buttons…

    Button













    JavaScript

    Get Elements By ID/Class/TagName/CSS Selector

        Getting elements by id, class, and tag among other options is a sizeable chunk of the JavaScripting one will do. This allows us to interact with the DOM

    // Get HTML element(s) with specified id.
      var x = document.getElementById('id');
    
    // Get HTML elements with specified class.
      var x = document.getElementsByClassName('className');
    
    // Get HTML elements with specified tag.
      var x = document.getElementsByTagName('tagName');
    
    // Get HTML elements tht matches a specified CSS selector
    // This example returns a list of all  elements with class="icon".
      var x = document.querySelectorAll("img.icon"); 
    

    Function

        The basic block of coding we all know and have come to love. Yes…the function.

    function sum(a, b) {
        return a + b;      // The function returns the sum of a and b
    }
    var sumVal = sum(2,4);
    alert(sumVal);  // Will pop-up saying 6
    

    If Statement

        Check the conditions.

    if (condition) {
    }
    

    Loops

        Loops baby, they’re needed and these will meet your needs.

    // Standard loop
    for (var i=0; i<array.length; i++) {
       array[i].innerHTML;
    }
    
    // For In Loop
    for (var tag in elements) {
        // Do stuff while there are tags to work on
    }
    
    // While Loop
    while (condition) {
        // Do stuff while condition is met
    }
    
    // Do While
     do {
        // One at least one and keep doing stuff while condition is met
    }
    while (condition);
    

    Switch/Case Statement

        Good for menu stuff, switch/case statements are ready for the job.

    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case  6:
            day = "Saturday";
    }
    alert(day);
    

    Alert & Console Log

        Error logging is helpful. The two way to do this are through alerts and console logging. Most of the time, alert isn’t used but it can be helpful to warn the user, etc.

    // This will generate a pop-up window with the "Hello, World!" text.
    alert("Hello, World!");
    
    // This will log to the console the "Hello, World!" text.
    To access the console in Firefox, do Ctrl+Shift+J
    console.log("Hello, World!");
    

    Adding Event Listeners

        Event listeners are the next most important after getting an element. They allow us to let the user click on stuff or interact through other ways in order to create dynamic interactions.

    // This attaches a click event to the entire DOM.
    // We can then check which IDs, Classes, etc were clicked to then do other things.
    
    document.addEventListener("click", (e) => {
        if(e.target.id == "alert2")
            alert("You clicked an element with the ID of alert2");
    
    });
    
    
    // This attaches to a specific element with the ID of cars and
    // when clicked alerts us to the innerHTML text.
    
    <p id="cars">Hello, World!</p>
    
    document.getElementById('cars').addEventListener("click", (e) => {
            alert("The content is:  " + e.target.innerHTML);
    });
    
    // This attaches it in a different manner.
    document.getElementById('cars').onclick =  function(){
        // do stuff
    }
    
    // You can add it though a tag as well.
    <div onclick="myFunction()"> I am clickable! </div>
    

    Here is a list of some common HTML event attributes:

    EventDescription
    onchangeAn HTML element has been changed
    onclickThe user clicks an HTML element
    onmouseoverThe user moves the mouse over an HTML element
    onmouseoutThe user moves the mouse away from an HTML element
    onkeydownThe user pushes a keyboard key
    onkeyupThe user releases a keyboard key
    onloadThe browser has finished loading the page

    Arrays

        Arrays in JavaScript are a special object and really act like lists or vectors since we can push new values to it.

    // An empty array
    var cars = [];
    
    // Has nodes/objects
    var cars = ["Toyota", "Sab", "Mazda"];
    
    // Add to array
    cars.push("Nesan');
    
    // Remove from end of array
    cars.pop();
    

    Parent Element

        Sometimes, we need to access the element that contains the element we accessed. This could be because we want to remove the element or we want to add something next to it than in it.

    <div>
        <p id="cars" >
            Cars are cool.
        </p>
    But boats are even more cool.
    </div>
    
    var x = document.getElementById('cars').parentElement;
    alert(x.innerHTML);  // This will present an alert box with "But boats are even more cool."
    
    
    // This will remove the element we accessed from the div
    var childElm = document.getElementById('cars');
    var parentElm = childElm.parentElement;
    
    parentElm.removeChild(childElm);
    

    Cookies

        Sometimes, we need to store user information for later usage. This is where cookies come in.

    function saveAsCookie() {
        var uName = document.getElementsByName("userName")[0].value;
        var eml = document.getElementsByName("email")[0].value;
    
    
        // should set expires date: Ex -> expires=(UTC date).
        // Use secure; in argument to make sure it only transports across HTTPS or secure connections
        document.cookie = "username=" + uName  +"; path=" + document.URL;
        document.cookie = "email=" + eml + "; path=" + document.URL;
    }
    
    function displayCookies() {
        var cookiesField = document.getElementById("cookieField");
        var cookies = document.cookie.split(";");  // Set as an array to traverse....
    
        for (var i=0; i<cookies.length; i++) {
            cookiesField.innerHTML += cookies[i] + "<br/>";
        }
    }
    
    function clerCookies() {
        var expireDate = "Thu, 01 Jan 1970 00:00:00 UTC";
        document.cookie = "username=; expires=" + expireDate;
        document.cookie = "email=; expires= " + expireDate;
    }
    
    <form>
    <input type="text" title="User Name" name="userName" placeholder="User Name" value=""/>
    <input type="text" title="Email" name="email" placeholder="Email" value=""/>
    <input type="button" name="submit"  onclick="saveAsCookie()" value="loginSubmit">
    </form>
    
    <button type="button" name="button" onclick="displayCookies()">Get Cookie</button>
    <button type="button" name="button" onclick="clerCookies()">Clear Cookie</button>
    
    <div id="cookieField"></div>
    

    AJAX

        AJAX is a developer’s dream, because you can:

    • Update a web page without reloading the page
    • Request data from a server – after the page has loaded
    • Receive data from a server – after the page has loaded
    • Send data to a server – in the background
    function loadDoc() {
      var xhttp = new XMLHttpRequest();        // Create the xhttp object
      xhttp.onreadystatechange = function() {  // This is actually run after open and send are done
        if (this.readyState == 4 && this.status == 200) {  // Confirm we have a  successful connection
         // Receive the response info. For PHP it is echo that sends it. Then set into demo div
         document.getElementById("demo").innerHTML = this.responseText;  
        }
      };
      xhttp.open("GET", "ajax_info.txt", true);  // post or get, path to XML page or php script, set async 
      xhttp.send();                              // Start the process
    }
    
    
    <button type="button" name="button" onclick="loadDoc()">Load XML</button>
    <div id="demo">

    String Manipulation

        String Manipulation can be important when handling cookies or data. Sometimes we need to split it into an array, make it lower case or vise versa, find a sub string, or more.
    These should get you started:

    // Find sub string
    var str = "Hello world, welcome to the universe.";
    var n = str.includes("world");
    
    // Find sub string at offset
    var str = "Hello world, welcome to the universe.";
    var n = str.includes("world", 12);
    
    // Replace string 
    var str = "Windows!";
    var res = str.replace("Windows", "Linux");  // old value, new value
    
    // Replace all case sensitive
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/g, "red");
    
    // Replace all case-insensitive
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/gi, "red");
    
    // String split
    var str = "How are you doing today?";
    var arry = str.split(" ");  // Split by spaces
    
    // To Upper
    var x = "Linux";
    x.toUpperCase();
    
    // To Lower
    var x = "LINUX";
    x.toLowerCase();
    

    Conclusion

        I think this list is pretty good and fits most user's needs. This should definitely help those who are looking for a certain tag or CSS logic or are just wanting to see a broad selection of what web technologies are based off of. Coders, website developers, Admins, etc should have most of what they need right on the page with good samples to start. Leave a commemt if you'd like me to add something else! Anyway, if you liked this reference sheet/cheat sheet, start using what you have learned by setting up a quick test server! Read my article by clicking the below image!


    Servers

    W3C Killed Web Security

    W3C Killed Web Security

    W3C Logo
    W3C Logo

        It’s a sad day folks…. The W3C killed web security by accepting DRM without having a caveat that protects against DMCA’s (Digital Millennium Copyright Act) unreasonable reach. Security researchers are out; hackers are in. While I am sure that most users believe that companies and creators have the right to protect their IP (Intellectual Property), I am also sure they believe in having strong security and a reasonable right to use their purchased product in whatever manner they see fit. With the web, it was a last bastion that held to those principles. It was killed both brutally and without much compunction by W3C and its corporate backers in a vain attempt to stem the tide of piracy and illegal copying.

        Let’s be clear here for a moment about the current problem. I don’t have an issue with DRM. I don’t agree with it all the time but neither do I disagree with it all the time. No, the issue is with DMCA and it’s unreasonable reach in trying and failing to protect DRM. There are two sections in the DMCA that are of great interest. The core section I am referring to is Section 1201: Circumvention of copyright protection systems.

        Section 1201 affects the web and all technologies the most and is why it is a sad day for the internet. The EFF letter to W3C addresses some of the concerns regarding Section 1201 in its implementation in web technologies.
    Here are some of the critical points they made when hoping W3C would add a pretext for accepting DRM standards.

        “This covenant would allow the W3C’s large corporate members to enforce their copyrights. Indeed, it kept intact every legal right to which entertainment companies, DRM vendors, and their business partners can otherwise lay claim. The compromise merely restricted their ability to use the W3C’s DRM to shut down legitimate activities, like research and modifications, that required circumvention of DRM….
        More directly, such a covenant would have helped protect the key stakeholders, present and future, who both depend on the openness of the Web, and who actively work to protect its safety and universality. It would offer some legal clarity for those who bypass DRM to engage in security research to find defects that would endanger billions of web users; or who automate the creation of enhanced, accessible video for people with disabilities; or who archive the Web for posterity. It would help protect new market entrants intent on creating competitive, innovative products, unimagined by the vendors locking down web video.”

    There is the crux of the issue and why W3C should have had clear stipulations for implementing DRM into web technologies. There really isn’t anything protecting the user and their right to circumvent DRM when it is not infringing the patent holder or IP source. Security experts are now in a quasi grey area where their work is to determine vulnerabilities but they are violating DMCA. This helps no one but the bad guys and that is just sad in the day and age where billions of users need strong security the most.

        In addition, we don’t know who did and didn’t vote in favor of the implementation of a DRM standard. The votes are secret and that should disturb us even more than the terrible overreach of DMCA’s rules. It is worth noting that W3C’s member votes aren’t always public and by default one must opt-in for public disclosure of said vote. For an organization that affects our lives, to not have public disclosure of votes by default and as enforced practice is egregious. We all know why this is the case though. Companies don’t want to look like the bad guys even when they are. So they hide in anonymity as we all are left to hang by their terrible decisions. We can make some guesses as to who voted for the standardization but don’t know who else are their accomplices. Essentially, a private group gets to affect our lives without us holding them accountable. In addition, their votes wont stop piracy or illegal copying. So all in all, they hurt themselves as well as us with nothing to show for it but the further stripping of our rights.

        While it all looks bad, there are bright spots. The US government is looking to open source its code base as much as it reasonably can. Maybe they’ll step in and decide obtrusive DRM and its protective DMCA rules are too powerful. If interested in some of their projects, check out my article covering some of the best packages released to date.

    WordPress CLI

    WordPress CLI

    WordPress CLI

        As a person who is more comfortable in a terminal environment than GUI, I love finding tools that make my life easier and more comfortable. When I started using WordPress I was often aggravated by the fact that I had to move around an interface rather than just typing up some html or a command to get a task done. Obviously, that method works well for small scale projects but less so when one is managing a lot of content and pages. WordPress just makes life easier in that respect. But I still like having lower level access and this is where WordPress CLI comes in. WordPress CLI is a command line interface for managing WordPress sites. Things like updating the core, plugins, or themes is made faster since I SSH often into my site’s box and can type up some commands quickly to do those tasks and much more. As such, I wanted to make a simple collection of commands that everyone will find useful. But first, we need to install the plugin….

    Installing WordPress CLI

        As per the sites instructions, it is extremely easy to get up and running. All one simply needs to do is download the file, chmod it, and move it to the proper location.
    To download:
    wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
    OR
    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

    Next, let us make it runnable. Simply type:
    chmod +x wp-cli.phar
    Let’s make sure the file is working properly.
    php wp-cli.phar --info
    From there, we are ready to move it to its new home. Simply type:
    *Note: You might need to use sudo depending on your level of access to the server.
    mv wp-cli.phar /usr/local/bin/wp

    Using WordPress CLI

        OK, now that WordPress CLI is installed we are set to use it. The first thing to do though is cd to the WordPress directory. This is usually somewhere in /var.
    Once there, it’s time to play with some of the commands. First things first, one should know what plugins and themes are installed. To do that, simply type:
    wp plugin list && wp theme list
    This will list all the slugs associated with the plugins themes. One needs them in order to do things like disable, remove, and install them.
    Now, let us say that we got from the above commands:

    Plugins:
    +--------------------------------+----------+--------+---------+
    | name                           | status   | update | version |
    +--------------------------------+----------+--------+---------+
    | add-from-server                | active   | none   | 3.3.3   |
    | akismet                        | active   | none   | 3.3.3   |
    | backup                         | inactive | none   | 1.1.46  |
    | maintenance-mode-free          | active   | none   | 1.2     |
    +--------------------------------+----------+--------+---------+
    
    Themes
    +-----------------+----------+--------+---------+
    | name            | status   | update | version |
    +-----------------+----------+--------+---------+
    | twentyfifteen   | active   | none   | 1.8     |
    | twentyseventeen | inactive | none   | 1.3     |
    | twentysixteen   | inactive | none   | 1.3     |
    +-----------------+----------+--------+---------+
    

    We notice that Akismet is installed and know too that we are transitioning to use a different plugin to handle spam fighting. To uninstall it we do the following:
    wp plugin deactivate akismet && wp plugin delete akismet
    If we want it back, we can do the following:
    wp plugin install akismet && wp plugin activate akismet
    Now, we should update or at least check to see if there is an update needed.
    wp plugin update akismet
    The same principles are used with themes as well. Replace akismet with the theme name from the list and you get the same results but for themes. The only differences are that instead of plugin we use theme in the command and to disable a theme one needs to use the term disable rather than deactivate. Like so:
    wp theme disable twentyfifteen

    Final Thoughts

        As a final thought or two, it is worth noting how to find the slug for a plugin or theme. To do that, go to either https://wordpress.org/plugins/ or https://wordpress.org/themes/. From there, after finding something worth while, look at the end of the url to find what we need. For this example, use the plugin bbpress and look at the end of its URL: https://wordpress.org/plugins/bbpress/. Supplant that information like so:
    wp plugin install bbpress && wp plugin activate bbpress
    This will then install the plugin and activate it.
        Welp, this covers the basics and gets one started but there are other commands that are available. Simply go to their site to find them. Now that we have an new awesome tool to play with, click the image below to look at quick servers one can setup for WordPress.


    https://www.itdominator.com/quick-test-server/

    servers with a blue tinted globe

    Quick Test Server

    Quick Test Server

    Server

        There are times when I need a server in order to test some feature or bit of code. I don’t like spooling up a Linux, Apache, Mysql, and PHP (LAMP) or Linux, Nginx, Mysql, and PHP (LEMP) stack because it’s tedious. Notice what I did there? I made the whole sentence tedious to get you to think it really is tedious. It really isn’t but frankly, I needed a reason to write this. Anyway, so, what is one to do? Well, there are two option that come to mind and those are Python, Php, or Netcat. One might ask, “Whaaat? Rly?” Yup. Really. All one needs to do is open up a terminal/cli and get ta hackin.

        Python call up the Python module SimpleHTTPServer using the switch -m and then give it a port. Make the port greater than 1024 since those are reserved and require root to use. BAM! Open your browser of poison and go to localhost:portNumber or 127.0.0.1:portNumber.

    Python Server

    python -m SimpleHTTPServer 1337
    

    I did not need to insert any index.html files to the directory. Python automatically gives a list of the directory contents when no index file is found. As a side note, Python doesn’t seem to read Php properly. I have yet to get it to work.

        For Php all one does is use the switch -S and then give it an address (127.0.0.1) and port. Again, make the port greater than 1024 since those are reserved and require root to use. BAM! Once more, open your browser of poison and go to localhost:portNumber or 127.0.0.1:portNumber.

    Php Server

    php -S 127.0.0.1:1337
    

    It is worth noting that with Php I had to insert an index.php file into the directory I ran the command from. It doesn’t generate any list but does throw an error when no index is found. Additionally, this method seems to only work with Php files. To test if the Php server works, simply insert in the index.php :

    <?php
        phpinfo();
    ?>
    

        For the last one we will look at Netcat. Netcat is the swiss army knife of the networking tools and has an interesting way of creating a kind of server. To start off, simply create a file called serve.sh. The name is arbitrary but that’s what we will use for this example. Then, in the file add

    Netcat Server

    #!/bin/bash
    
        echo "`cat index.html`"
    

    When this is done, simply create an index.html as you would any other. In my case, I did:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Google Link</title>
    </head>
    <body>
        <h1><a href="http://www.google.com">Google</a></h1>
    </body>
    </html>
    

    After all this prep, which isn’t much we simply run in the terminal where serve.sh and index.html is:

    while true; \
    do { \
        echo -e 'HTTP/1.1 200 OK\r\n'; sh serve.sh; \
    } | nc -l 1337; \
    done
    

    One might need to press enter again to actually run it because of the \’s stating “look to next line for rest of command”. One can also just remove the \’s and put the whole command like so:

    while true; do { echo -e 'HTTP/1.1 200 OK\r\n'; sh serve.sh; } | nc -l 1337; done
    

    One can use Php with this by the way. All one does is rename index.html to index.php. Then one adds some code like in the Php example above. After that, in the serve.sh, edit the cat index.php to be php index.php. This has Php interpret the file which then has its output gets echoed back to the requester.
    All of this needs some explaining. So what is happening is that the while loop is checking to see if there is anything left to run. Note that the first part before the semicolon tells the browser that there is a server where one requested one. IE, it confirms the request. Then, the serve.sh is ran. In serve.sh it echos out what cat prints from index.html or what Php prints from index.php. This is essentially sent as the file back to the requester. Thus, we can see the h1 sized Google anchor link in this example.

        Voila! A nice juicy server is ready for use in any project that needs one. If one is adventurous, one can use these simple servers to serve files on the local network. To do this, all you have to do is allow the port to accept connections using UFW and then change the address “127.0.0.1” to “0.0.0.0”. This isn’t recommended for long term use but can be useful when needing to transfer something or using an app that’s for the local network. Even then, one might be better off just using ssh or email! Still, in those rare times, all one does is allow the port to be open by using ufw.

    ufw allow portNumber/tcp
    

    To remove the rule:

    ufw status numbered
    ufw delete "the number associated with ones portNumber"
    
    Schools Should Teach Kids Scripting

    Schools Should Teach Kids Scripting

        Schools should teach kids scripting. When I say kids I am thinking of those old enough to be in grades 5-8. Forget actual programming (though one may argue scripting is programming) and get them into Bash. I say Bash because it’s already installed on most major platforms with Microsoft finally coming around in Windows 10. One may ask why and the answer is simple. It is simple. There is no need to install compilers and there is no need to worry about includes or imports or whatever else others have cleverly implemented to create despair in a programmer. Not only that, it gets the core ideas of programming down. Sure, it isn’t Object Oriented Programming (OOP) but that is a minor issue when we are talking about kids. The gist of programming is understanding iterations, functions, variables, assignment, general maths, and other bits and bobs. Once these are down, it is relatively easy to learn most languages. As an example of how easy it is to get started, I will show an example that prints to the terminal screen “Hello World!” and the current user that is logged in with a separate function for each: main and showUser.

    Bash Example

    #!/bin/bash
    
    function main() {
        echo "Hello World!"; // Prints to the terminal Hello World.
        showUser;            // Calls showUser function
    }
    
    function showUser() {
        me=`whoami`;  // Runs a command and assigns the output to me
        echo $me;     // calls the variable me and prints to the terminal.
    }
    main; // Calls main function
    
    

    When in a Linux environment this can be made more advanced with simple GUIs through zenity, yad, or dialog.
    I wont show an example for those but one should get the drift.

        From the established core, one will then focus their attention on concepts like encapsulation, obfuscation, polymorphism, etc. Getting core concepts involving imperative statements and logical procedure is the hardest part. Having had my programming career start off this way makes me biased but it seems to me to be a more logical flow. Schools covering grades 9-12 should cover concepts of OOP by using Java which is a proper programming language. I advocate for Java because of its FX library and the tools that allow one to create full fledged programs. As case and point, let’s look at how easy it is to create a window with a button. To see how easy it is I will use an analogy of a play being setup.

    Java Example

    import javafx.application.Application;  // The building where the play is
    import javafx.stage.Stage;              // The stage in the building
    import javafx.scene.Scene;              // The scene of the play. Ie, are we in a city, park, house
    import javafx.scene.layout.AnchorPane;  // The confinement of the objects in the scene. Like a house or ally with walls.
    import javafx.scene.control.Button;     // The actual objects of the play. Plants, pots, food, etc.
    
    public class Main extends Application {
        @Override
        public void start(Stage stage) {
            // define what is going to be in the scene
            AnchorPane pane = new AnchorPane();    // Create the confinement of where objects go.
            Button closeBttn = new Button("Close Stage Curtain");  // Create an object for our world. A button called Close Stage Curtain.
    
            pane.getChildren().add(closeBttn);            // Add to the confinement
            Scene scene = new Scene(pane, 800, 600);      // Determin what the scene is comprised of. Ie, dogs and cats with plants?
    
            stage.setTitle("The Phantome of the Opera");  // Tell the world what play we are seeing
            stage.setResizable(false);    // Limit the stage size to what size the scene says and no more or less
            stage.setScene(scene);        // Set our scene onto the stage
            stage.show();                 // Open the curtains
    
            closeBttn.setOnAction(e -> {
                stage.close();  // Close the stage curtain
            });
        }
    
        public static void main(String[] args) { launch(args); }
    }
    

    Excluding the fluff of importing the needed libraries and calling main, one can with nine to ten meaningful commands setup a window with a proper title and a button. Not only that, the button closes the window. Amazing! I also like using the play analogy because it gives the top to bottom logic of how Java operates to setup a window. In addition, Java uses HTML and CSS for styling windows. This is awesome because it adds another useful tool were one to get further along in learning all there is to know about tech. So what are your thoughts? Should schools teach kids in this order and with these selected languages? Comment below or Message me through email.

    ITDominator’s Github Projects

    ITDominator’s Github Projects

    Github:
    Github Cat Image
        This is my Github account. I have accumulated a good number of programs and repositories over the years. Though, much of it has now been setup in an archive repository since I no longer support the code. The ones not in the archive are my active projects and represent my current skill level barring proper try/catch handling which I am too lazy to implement at this time. Otherwise, they are my projects to improve my coding skills.

        PS – Yes, not all (probably most) properly meet OOP standards. This is a personal choice since I don’t want to create a number of files just to have code split up properly. One controller file suits my needs just fine at this time. Though, one or two will eventually get refactored and setup to meet OOP standards.

    Redirect