Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Mario Luevanos marioluevanos

🏠
Working from home
View GitHub Profile
@marioluevanos
marioluevanos / MediaQueryList-example.js
Created Jan 22, 2020
Media Query List Web API example
View MediaQueryList-example.js
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 Jun 14, 2019
Returns the value of nested property, or else returns undefined.
View accessProperty.js
/**
* @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 = {
View promiseWithTimeout.js
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 Jan 9, 2019
Checks if a valid email format.
View validEmailFormat.js
function validEmailFormat(email) {
return email.length > 0 && /\w[@].+[.]\w{2,3}/.test(email)
}
@marioluevanos
marioluevanos / functionalStateContainer.js
Last active Jan 9, 2019
Functional state container that encapsulates state with closures.
View functionalStateContainer.js
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 Jul 23, 2018
If a mobile device, return boolean
View ifMobile.js
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 Jul 23, 2018
Mutates an array to a new index location
View reOrderArray.js
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 Feb 26, 2016
SCSS Grid Generator
View _grid.scss
/* 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 */