GrahamTheDevIt's spooky time again! A couple of years ago I made you all recoil in horror with my Halloween article on HTML, CSS and JS monstrosities.
Well I am back at it again, and this time the examples are more fiendish than ever!
Contents
HellTML
Oh my eyes, my eyes. The screams of horror I let out when I saw these:
A linkBootton
<div tabindex="3">
<div role="button">
<a href="#">
<svg> … </svg>
</a>
</div>
</div>
Image butt...oh noes!
<img src="/images/edit.webp"
onclick="edit(userID)"
onmouseover="openEditPopover(userID)"
>
<br>
<img src="/images/delete.png"
onclick="delete(userID)"
onmouseover="openEditPopover(userID)"
>
New line nasties!
Oh dear...I don't know what hurts more, the new lines or the role="sign-up" 😔
<div
role="sign-up"
>
Sign up today!
</div
>
That is just poor form my old fellow!
<form role="form">
<h4>Do you like</h4>
<h2>sea food?</h2>
<div id="poll-question" role="radiogroup">Whould you like sea food?</div>
<div name="poll-grouping" role="radiogroup">
<div role="radiogroup">
<input type="radio" name="seafood" value="[object Object]" data-value="1">
<span>Yes</span>
<input type="radio" name="seafood" value="[object Object]" data-value="2">
<span>No</span>
<input type="radio" name="seafood" value="[object Object]" data-value="2">
<span>Maybe</span>
<input type="radio" name="seafood" value="[object Object]" data-value="2">
<span>Can you repeat the question?</span>
</div>
<button type="submit"><img src="submit.png"></button>
</div>
</form>
Now that is using your <head(er)>!
<a href="about">
<header>About</header>
</a>
<a href="faqs">
<header>FAQs</header>
</a>
<a href="contact">
<header>Contact</header>
</a>
JavaScreams
Oh JS is already scary enough, but some of these practices make my skin crawl!
Never forget the new!
It is so difficult to remember that pesky new keyword when creating classes, luckily this fixes that! 😱
function Car(colour) {
if ( !(this instanceof Car) )
return new Car(colour);
this.colour = colour;
}
Car.prototype.getColour = function() {
return "Colour: " + this.colour;
}
var aCar = Car("Red");
console.log(aCar.colour());
> "Colour: Red"
Disabled, is disabled, is disabled, right?
let disabledState = false;
function isDisabled(isDisabled){
return isDisabled == false ? false : true;
}
let disabledVal = isDisabled(disabledState);
console.log(disabledVal);
The number of ways I hate this
So, who knew that 0.443.232.232...1 was a valid number?
function isNumeric(str) {
var validCh = "0123456789.";
var isNum = true;
var ch = "";
for (i = 0; i < str.length && isNum == true; i++) {
ch = str.charAt(i);
if (validCh.indexOf(ch) == -1) {
isNum = false;
}
}
//I had to recycle the code from the previous example, just to make this hurt even more
return IsNum == true ? true : false;
}
console.log(isNumeric("0.443.232.232...1")) // true! 😔
A true booolean!
const handleBoolean = value => {
switch (value) {
case "true":
return true;
case true:
return "true";
case 1:
return "true";
case "1":
return "true";
case "false":
return false;
case false:
return "false";
case 0:
return "false";
case "0":
return "false";
default:
return null;
}
}
the big reset is coming!
function resetform()
{
var field1 = document.getElementById('firstName');
field1.value = '';
var field2 = document.getElementById('lastName');
field2.value = '';
var field3 = document.getElementById('dob');
field3.value = '';
var field4 = document.getElementById('addLine1');
field4.value = '';
var field5 = document.getElementById('addLine2');
field5.value = '';
var field6 = document.getElementById('addLine3');
field6.value = '';
var field7 = document.getElementById('county');
field7.value = '';
var field8 = document.getElementById('postcode');
field8.value = '';
}
Spooky CSS
You are still here? Wow you are a brave one. But this CSS is sure to finish you off!
Site-wide styles!
*{
font-size: 11px!important;
}
*{
margin: 5px;
}
*{
padding: 10px;
}
Make sure to minimise your CSS for performance this Halloween!
.p{
padding: 20px;
}
.m{
margin: 10px;
}
.u{
text-decoration: underline;
}
.r{
color: red;
}
.rb{
background-color: red;
}
Var you kidding me?
:root{
--base: 16px;
--small: calc(var(--base) * 0.8);
--large: calc(var(--small) * 1.5);
--padding1: calc(var(--large) * 0.75) calc(var(--small) * 1.2);
}
.padded{
padding: var(--padding1);
}
Some Pumpkin carvings to cheer you up!
You have endured a lot, once again, brave traveller.
As you have made it this far, here as some pumpkin carvings me and my friends did in the last couple of years to cheer you up!
Gizmo (Gremlins) and House Stark Sigil
Gizmo was one of my favs!
I decided to do House Stark (probably 3 years ago now)...possibly the hardest carving I have done to date, everything was so fragile!
Darth Maul
Love Star Wars or hate it...Darth Maul is still so iconic I had to carve him!
Happy Halloween!
