NiallJoeMaher

3D Buttons, CSS only!

Learning different 3D effects that can be created with CSS

A Pen by Niall Maher on CodePen.

License.

NiallJoeMaher

// The simple one :P 
const testArray1 = [1, 2, [3, 4]];
testArray1.flat(); // returns  [1, 2, 3, 4]

const testArray2 = [1, 2, [3, 4, [5, 6]]];
testArray2.flat();
// returns [1, 2, 3, 4, [5, 6]];
testArray2.flat(2); // goes two levels deep recursively as we passed the parameter
// returns [1, 2, 3, 4, 5, 6];

NiallJoeMaher

const testArray1 = ["It's Always Sunny in", "", "Philadelphia"];

// First using a map for comparison
testArray1.map(x => x.split(" "));
//returns [["It's", "Always", "Sunny","in"],[""],["Philadelphia"]]

// Now let us see flatMap in action!
testArray1.flatMap(x => x.split(" "));
//returns ["It's","Sunny","in", "", "Philadelphia"]

NiallJoeMaher

// Before
try {
   ...
} catch(error) {
   ...
}
// After
try {
   ...
} catch {

NiallJoeMaher

//With Object.fromEntries, you can convert from Map to Object:
const testMap = new Map([ ['hello', 'world'], ['lorem', 42] ]);
const result1 = Object.fromEntries(testMap);
console.log(result1); // { hello: "world", lorem: 42 }

//With Object.fromEntries, you can convert from Array to Object:
const testArray = [ ['first', 0], ['second', 1], ['third', 2] ];
const result2 = Object.fromEntries(testArray);
console.log(result2); // { first: 0, second: 1, third: 2 }

NiallJoeMaher

// trimStart
'Hello World'.trimStart();
// returns 'Hello World'
' Hello World'.trimStart(); 
// returns 'Hello World'
' Hello World   '.trimStart(); 
//returns 'Hello World   '

// trimLeft
'Hello World'.trimLeft();

NiallJoeMaher

// trimStart
'Hello World'.trimEnd();
// returns 'Hello World'
' Hello World'.trimEnd(); 
// returns ' Hello World'
'  Hello World   '.trimEnd(); 
// returns '  Hello World'

// trimLeft
'Hello World'.trimRight();

NiallJoeMaher

console.log(Symbol('test description').description); // "test description"

console.log(Symbol.iterator.description); // "Symbol.iterator"

console.log(Symbol.for('test description').description); // "test description"

NiallJoeMaher

// The behaviour was this:
bar.toString() // 'function bar() {}

//now the new behaviour is:
bar.toString(); // 'function /* this is bar */ bar () {}'

NiallJoeMaher

.c-Button {
 background-color: #6515dd;
 border: 1px solid transparent;
 border-radius: 50px;
 box-shadow: none;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: flex;
 font-size: 18px;