mattdanielbrown

#!/usr/bin/env bash

function define_color_escape_code_variables() {

  # black='\e[0;30m'
	
	export black='\e[30m'
	export red='\e[31m'
	export green='\e[32m'
	export brown='\e[33m'

mattdanielbrown

Cards

Recreation of this Dribbble shot designed by the talented Vishnu Prasad: https://dribbble.com/shots/11522673-Landing-Page-Components

A Pen by Matt Daniel Brown on CodePen.

License.

mattdanielbrown

<textarea rows="1">Here is a very long value for testing auto height</textarea>

<pre><code class="language-js">document.querySelectorAll('textarea').forEach(el => {
  el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px');
  el.classList.add('auto');
  el.addEventListener('input', e => {
    el.style.height = 'auto';
    el.style.height = (el.scrollHeight) + 'px';
  });
});</code></pre>

mattdanielbrown

	<a href="https://front.codes/" class="logo" target="_blank">
		<img src="https://assets.codepen.io/1462889/fcy.png" alt="">
	</a>

	<div class="section">
		<div class="container">
			<div class="row full-height justify-content-center">
				<div class="col-12 text-center align-self-center py-5">
					<div class="section pb-5 pt-5 pt-sm-2 text-center">

mattdanielbrown

/**
 * The Mobile First is the design strategy that takes 
 * priority development for mobile devices like 
 * smartphones and tablets. It means all styles outside 
 * of a media queries apply to all devices, then larger 
 * screens are targeted for enhancement. 
 *
 * This prevents small devices from having to parse 
 * tons of unused CSS. 

mattdanielbrown

Dashboard UI

A dashboard concept designed by Jordan Hughes: https://dribbble.com/shots/16506804/attachments/11468776?mode=media

Icons from https://phosphoricons.com/

Logos from https://worldvectorlogo.com/

A Pen by Matt Daniel Brown on CodePen.

mattdanielbrown

Comprehensive HTML Head Content For PWA (WebApps)

Comprehensive HTML Head Content For Progressive Web Applications (WebApps).

A Pen by Matt Daniel Brown on CodePen.

License.

mattdanielbrown

Display a globe on a webpage

Create a map using the globe projection.

See the example: https://docs.mapbox.com//mapbox-gl-js/example/globe/

A Pen by Matt Daniel Brown on CodePen.

License.

mattdanielbrown

Custom Dial (Range) Input Control

A Pen by Matt Daniel Brown on CodePen.

License.

mattdanielbrown

!function() {
  "use strict";
  
  if (!window.requestAnimationFrame) {
    var a                         = null;
    window.requestAnimationFrame  = function(t, i) {
      var    e = (new Date).getTime();
       a || (a = e);
      var    s = Math.max(0, 16 - (e - a)),
             n = window.setTimeout(function() { t(e + s) }, s);