Skip to content

Instantly share code, notes, and snippets.

View marioluevanos's full-sized avatar
🏠
Working from home

Mario Luevanos marioluevanos

🏠
Working from home
View GitHub Profile
@marioluevanos
marioluevanos / MediaQueryList-example.js
Created January 22, 2020 03:35
Media Query List Web API example
var para = document.querySelector('p');
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = 'This is a narrow screen — less than 600px wide.';
document.body.style.backgroundColor = 'red';
} else {
@marioluevanos
marioluevanos / accessProperty.js
Last active June 14, 2019 18:44
Returns the value of nested property, or else returns undefined.
/**
* @param {Object}
* @param {String} keys - Dot notation of property access
*/
function accessProperty(object, keys) {
return keys.split('.').reduce((value, key) => value && value[key], object)
}
// Unknown if nested values will exist
const payload = {
@marioluevanos
marioluevanos / promiseWithTimeout.js
Created January 11, 2019 21:59
A Promise with a timeout
function promiseWithTimeout(promise, timeoutTime = 5000) {
return new Promise((resolve, reject) => {
const timeout = setTimeout(() => reject({
message: 'timeout'
}), timeoutTime)
const resolveWithTimeout = (res) => {
clearTimeout(timeout)
resolve(res)
}
const rejectWithTimeout = (err) => {
@marioluevanos
marioluevanos / validEmailFormat.js
Created January 9, 2019 20:45
Checks if a valid email format.
function validEmailFormat(email) {
return email.length > 0 && /\w[@].+[.]\w{2,3}/.test(email)
}
@marioluevanos
marioluevanos / functionalStateContainer.js
Last active January 9, 2019 20:42
Functional state container that encapsulates state with closures.
const useReducer = (reducer, initState = {}) => {
let state = initState;
const getState = () => state;
const dispatch = action => (state = reducer(state, action));
return Object.freeze({ getState, dispatch });
};
const reducer = (state, action) => {
@marioluevanos
marioluevanos / ifMobile.js
Created July 23, 2018 21:19
If a mobile device, return boolean
const ifMobile = () => {
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/IEMobile/i) ||
navigator.userAgent.match(/Opera Mini/i)
) {
@marioluevanos
marioluevanos / reOrderArray.js
Last active July 23, 2018 21:18
Mutates an array to a new index location
const reOrderArray = (array, oldIndex, newIndex) => {
if ( array.length === 0 ) return array
while (oldIndex < 0) {
oldIndex += array.length
}
while (newIndex < 0) {
newIndex += array.length
}
if (newIndex >= array.length) {
var k = newIndex - array.length
@marioluevanos
marioluevanos / _grid.scss
Last active February 26, 2016 01:45
SCSS Grid Generator
/* Default Variables */
$column_name : col !default;
$column_before : before !default;
$column_after : after !default;
$max_width : 1080; // Unit in pixels
$column_count : 12;
$column_gutter : 15; // Unit in pixels
$column_width : ($max-width / $column_count) - ($column_gutter * 2); // Unit in percentages
/* Column Wrapper */