A Pen by Matt Daniel Brown on CodePen.
Matt Daniel Brown mattdanielbrown
mattdanielbrown
/ dependency-free-colored-text.js
Created
July 31, 2022 05:48
dependency-free-colored-text.js : Simple file to enable console logging colored text without necessitating any dependencies (i.e., Chalk)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| function testCode() { | |
| console.log('\x1b[33m Welcome to the app! \x1b[0m'); | |
| } | |
| const yellowText = (textContent) => { | |
| return `\x1b[33m${textContent}\x1b[0m`; | |
| } | |
| const blueText = (textContent) => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class='drag cursor-grab'> | |
| </div> | |
| <span class="icon-wrapper"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> | |
| <title>drag-up</title> | |
| <g fill="#0c0c0c"> | |
| <polygon points="15,14 17,14 17,7 22,7 16,0 10,7 15,7 "></polygon> | |
| <circle fill="#0c0c0c" cx="16" cy="24" r="8"></circle> | |
| </g> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <title>particle engine</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"></div> |
mattdanielbrown
/ fixed-bottom-nav-w-tailwind.markdown
Created
April 21, 2022 05:13
Fixed Bottom Nav w/ Tailwind
This is similar to my Deposit Slip Pen, but it’s a check. Based heavily on a Wells Fargo design. Fill in the amount in words to see the remaining space lined out! Note: No real personal info was used here.
Update 4/29/21: Forgot the viewport meta
A Pen by Matt Daniel Brown on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .app | |
| .no-int | |
| nav | |
| button(tabindex="0",data-home) | |
| .btn-cnt(tabindex="-1") | |
| svg(class="icon",xmlns="http://www.w3.org/2000/svg",viewBox="0 0 32 32",x="0px",y="0px") | |
| g | |
| polygon(points="16,2 2,12 2,30 30,30 30,12 16,2") | |
| span="Home" |
Use JavaScript’s Device Tilt API to detect motion https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
A Pen by Matt Daniel Brown on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="cards"> | |
| <div class="contact">Contact Me</div> | |
| <div class="contact-form"> | |
| <a href="#" class="close"><i class="fa fa-times"></i></a> | |
| <form> | |
| <div class="control"><input type="text" id="name"/><label for="name">Your Name</label></div> | |
| <div class="control"><input type="text" id="email"/><label for="email">Email Address</label></div> | |
| <div class="control"><input type="text" id="url"/><label for="url">Website</label></div> | |
| <div class="control"><textarea name="" id="message"></textarea><label for="message">Message</label></div> |
mattdanielbrown
/ html-kitchen-sink-in-pug.markdown
Created
March 18, 2022 10:01
HTML Kitchen Sink in Pug
A Pen by Matt Daniel Brown on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul style="list-style: disc;"> | |
| <li>Lorem, ipsum dolor.</li> | |
| <li>Expedita, impedit quibusdam?</li> | |
| <li>Iste, saepe exercitationem.</li> | |
| </ul> | |
| <ul style="list-style: circle;"> | |
| <li>Lorem, ipsum dolor.</li> | |
| <li>Expedita, impedit quibusdam?</li> | |
| <li>Iste, saepe exercitationem.</li> |