• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

Code Samples

Code samples to demonstrate various programming concepts, in various languages, tweaks, methodology, API, hacks, achievable features and solutions.

[TIP] Using PREPEND in Either jQuery or Pure JavaScript

October 13, 2016 by GµårÐïåñ

Question

I was asked a question today about how to do the same thing as prepend in jQuery but without loading and using that library, so bascially to do it in pure JavaScript.

For most programmers, this kind of “equivalency”, if you will, is often fairly easy to do and the reason we opt for libraries like jQuery is more for convenience and consistency than inability.

This is to show there is no magic to it (most of the time) and when you pull back the veil and understand what is happening, you realize that jQuery simply takes the pains of repetition and ugliness out of your code.

jQuery

...
// api.jquery.com/prepend/
// jQuery API Documentation | .prepend( content [, content ] ) | Returns: jQuery
// Syntax: $(selector).prepend(content,function(index,html))
// Description: Insert content, by parameter, to the beginning of each matched element.

var x = $('destination-object');
var y = $('source-object');
x.prepend(y);

...
// not too bad in jQuery

$('destination-object').prepend($('source-object'));

JavaScript

...
// www.w3schools.com/jsref/met_node_insertbefore.asp
// W3Schools | .insertBefore(newItem, .childNodes[0])
// Returns: A Node Object of the inserted node
// Syntax: node.insertBefore(newnode,existingnode)
// Description: Inserts a node as child, right before an existing child, which you specify.

var x = document.getElementById("destination-object");
var y = document.getElementById("source-object");
x.insertBefore(y, x.childNodes[0]);

...
// this is INSANE

document.getElementById("destination-object").insertBefore(document.getElementById("source-object"), document.getElementById("source-object").childNodes[0]);

For the love of all that is holly, don’t do these ugly one line chains please. Sacrifice a negligable amount of overhead and make your code more readable by expanding your syntax a bit to be more clear.

If for no other reason than to be self-serving and have an easier time debugging and detecting typos. Or, consider that you will type less in the long run which would actually make your code more efficient. If that wasn’t enough, consider that you will enjoy better logic flow and conceptualization as well.

Ultimately, to each their own, but hopefully this was a nice little token refresher. LLC away. — Mike


There should be no implication that jQuery is any less JavaScript, just that one is at its stock core and the other has extended functionality wrapped around it in a library that can expedite or shorthand a lot of what would be otherwise tediously long and ugly. That fact that a dedicated community of awesome people maintain the code all the time relieving you of having to constantly audit your code is just gravy.

Posted in: Tips Tagged: code, JavaScript, jQuery

Smiley in CSS [INTERMEDIATE]

February 14, 2016 by GµårÐïåñ
Using Pure CSS, especially the features introduced in advanced browsers and version 3, you can achieve a ubiquitous symbol.

Note: IE often has trouble handling things like this.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Smile</title>
<style type="text/css">
div.smileyface {
	width: 300px;
	height: 300px;
	position: relative;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	display: block;
	background: #ffe632;
	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	}
	
p.eyes {
	width: 50px;
	height: 80px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}	
	
	p.eyes.lefteye {
		left: 75px;
		}
		
	p.eyes.righteye {
		right: 75px;
		}
		
div.smile {
	width: 200px;
	height: 70px;
	border: 10px solid #222;
	border-top: 0;
	background: rgba(0,0,0,0);
	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
	border-radius: 0 0 120px 120px / 0 0 90px 90px;
	position: absolute;
	bottom: 50px;
	left: 38px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}
	
div.corner {
	width: 10px;
	height: 30px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: -12px;
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	left: -12px;
	}
	
	div.corner.right {
		left: 202px;
		-webkit-transform: rotate(-65deg);
		-moz-transform: rotate(-65deg);		
		}
</style>
</head>
<body>
<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>
</body>
</html>
DEMO | DOWNLOAD
Posted in: Education, Intermediate Tagged: code, CSS, intermediate level
1 2 … 7 Next »

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
January 2021
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031
« Apr    

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

CodeProject

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

1953 1935 daily pic 1922 1946 1908 1944 1972 1851 1947 1956 NASA 1962 1916 1918 1994 1937 1898 1970 1985 1870 1952 1961 1938 1948 1969 1959 1981 1941 1998 1982 1983 1967 1979 memorial 1934 event 1846 1789 1901 1968 1911 1933 1859 1964 1971 England 1957 1958 has_video 1990 Germany code United States national park 1976 1940 1980 annual 1954 1986 Soviet Union 1965 1955 1902 1995 1943 has_audio 1939 1963 1993 holiday 1950 1960 1951 1977 1973 1889 1989 1942 1978 1975 1949 1914 1776 history 1917 1966 1945 1863 2000 1919 1984 New York 1991 1915 vocabulary 1865 1974 1812

Archives

Access Options

  • Register
  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2021 Major Mike | Privacy Policy | DMCA | Contact | About
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal