A simple vanilla JS carousel/image slider
Clicking the "beads" directly is still buggy
A Pen by Charles Ojukwu on CodePen.
Matthew Daniel Brown matt-daniel-brown
This file contains 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
| <nav> | |
| <div class="brand"> | |
| BRAND | |
| </div> | |
| <!--<button class="mobile-btn" id="mobile-btn">Menu</button>--> | |
| <button id="mobile-btn" class="hamburger-btn"> | |
| <span class="hamburger-line"></span> | |
| <span class="hamburger-line"></span> | |
| <span class="hamburger-line"></span> | |
| </button> |
matt-daniel-brown
/ footer-always-on-bottom.markdown
Created
September 4, 2018 09:05
Footer always on bottom
Some SCSS to implement a very basic grid system. It is responsive over 2 breakpoints. Feel free to use this in your pens.
A Pen by Charles Ojukwu on CodePen.
This file contains 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="helper"></div> | |
| <section class="page"> | |
| <h2>Page 1</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ratione quidem temporibus quisquam minus quae aliquam eaque dolorem impedit tempore nobis enim maiores aut vel eligendi atque, qui optio debitis!</p> | |
| <p>Veritatis quod quis dolorum iure modi rerum aliquam ad optio eveniet deserunt temporibus, eaque molestiae ut commodi distinctio accusantium ratione molestias possimus illo! Facere et possimus error in delectus iusto?</p> | |
| </section> | |
| <div class="helper"></div> | |
| <section class="page"> | |
| <h2>Page 2</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto odio suscipit optio, tempore. Sit qui modi enim repellendus, adipisci accusamus vitae, saepe ea repudiandae consequuntur, provident, explicabo necessitatibus laboriosam et!</p> |
This file contains 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
| <nav id="nav" class="nav"> | |
| <ul id="nav-list" class="nav-list"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Products</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button id="menu-button" class="hamburger"> |
matt-daniel-brown
/ m-logo_base64-encoded.txt
Last active
July 16, 2018 03:35
M Logo and personal profile image base64 encoded.
This file contains 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
| iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAABVIklEQVR4nOzdfVxT6Zk//ltxkOFhIgaCKImJI8Eaoos6EoXRMCDOgNrpFB2wtWJndjstbPX7+25rq9ui09XW2e232oV22rELVjswOHSmo9DyIMloeMiITyRxDFEIiYAkgQkBgqDI7xUNW8b6ACcnuXOfXO9/pqtyzmc1cJ37Oudc94yxsTEEAAAATNV03AEAAACQCQoIAAAASqCAAAAAoAQKCAAAAEqggAAAAKAECggAAABKoIAAAACgBAoIAAAASqCAAAAAoAQKCAAAAEqmZ+4pPIU7BAAAAPL4DYYufV9nMIvSE0UncYcBAADg/QaH7kRVKdrr77ewKuo0mwWb8s41qtqCcQcDAADgvbot9uCPa25U9w2MiCbeA0k8XCyHdhYAAIDHam6xOOrEIsf/9psVs3bf+G90mKx8ncEsiuaFX2Czgr7AmhIAAIDXMPcOLZc1Gqt7+26vHP+1afyNP33UhiB3K/NzQoQ8zm3PRgQAAOBtui324JoGg9Wx6Jj46497jHfG9rzjtS0G01zPxAMAAOCN2jtta2saDNceLh7oSe+B3OqxrVqfW9DRqGpb6/aEAAAAvE63xb5WcaFTjhCa96jff+qLhFl7i+QtBtNit6QDAADglRzFo6bBIH/Sn5nUm+jb847/rVyhEdOWDAAAgNf6/EbvlqcVD/SEm+iPFB/Lzy45uOOYy+kAAAB4pep6w3ZTj71oMn92SrOwlGp9EbSzAACAmbot9rWTLR7o4fdAJqNGqd00MDQ8QyIW1FNKCAAAwOtc0HQf/EzV/YepfM2UWlgTxcfy80sO7vhXKl8LAADAe1TXG/7b1GPPnerXTXkFMq7DZF2JxpBeIhZcofL1AAAA8KuuN/zK1GP/PpWvpVxA0IN7ImmOY0jEgk+pHgMAAAAe55o6TnSaBv+F6te7VEAcX69U66VoDCEoIgAAQI7qeoOs0zS4yZVjuFpA7nMUEZ3B7BfN |
matt-daniel-brown
/ asynce-example-simple-fetchdata.js
Created
May 19, 2018 19:06
Simple ES6 Async Example: Rewriting a promise chain with an async function
This file contains 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
| /* | |
| * Using An API that returns a Promise will | |
| * result in a promise chain, and it splits | |
| * the function into many parts. | |
| * | |
| * (for example...) | |
| */ | |
| function getProcessedData(url) { | |
| return downloadData(url) // returns a promise | |
| .catch(e => { |
matt-daniel-brown
/ grab-favicon-files.sh
Created
December 31, 2017 02:00
Manifest, Metadata, and Favicons for P.W.A. version of _mattdanielbrown.com_ (UNDER DEVELOPMENT)
This file contains 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
| #!/usr/bin/env bash | |
| // @TODO : write this... | |
| // ... (something like...): | |
| // | |
| // git clone {favicons.url} | |
| // rm -R .git/ | |
| // cd ../ | |
| // mv {favicons.dirname}/{~all_dir_contents~} -> `./` | |
| // rm -R {favicons.dirnam} |
matt-daniel-brown
/ fluid-type-sass-mixin.markdown
Created
December 12, 2017 23:58
Fluid Type Sass - Mixin
A Pen by Matthew Daniel Brown on CodePen.