Skip to content

Instantly share code, notes, and snippets.

View javierarques's full-sized avatar

Javier javierarques

View GitHub Profile
@javierarques
javierarques / form-validation.js
Last active March 2, 2018 09:55
Form Validation using HTML5 constraint API
const HAS_ERROR_CLASS = 'has-error';
const ERROR_MESSAGE_CLASS = 'FormGroup-feedback';
const SELECTORS = {
errorMessage: `.${ERROR_MESSAGE_CLASS}`
};
const FormValidation = {
init() {
let forms = window.document.querySelectorAll('[data-validate]');
if (!forms) return;
@javierarques
javierarques / fetch-jsonp.js
Last active January 16, 2018 21:24
fetchJsonp example: fetching Flickr feed images
import fetchJsonp from 'fetch-jsonp';
const endpoint =
'http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=Valencia&tagmode=any';
const result = fetchJsonp(endpoint, {
jsonpCallback: 'jsoncallback',
timeout: 3000
});
@javierarques
javierarques / waitUntilElementExists.js
Created August 22, 2017 14:54
waitUntilElementExists.js: Wait DOM element exists in the page with vanilla JS and Promises
const waitUntilElementExists = (DOMSelector, MAX_TIME = 10000) => {
let timeout = 0;
const waitForContainerElement = (resolve, reject) => {
const container = document.querySelector(DOMSelector);
timeout += 30;
if (timeout >= MAX_TIME) reject('Element not found');
if (!container || container.length === 0) {
@javierarques
javierarques / config.rb
Created August 22, 2017 08:00
Middleman 4 and Webpack 3 integration. Use Middleman with External Pipeline.
# ...
activate :external_pipeline,
name: :webpack,
command: build? ? "npm run build:assets" : "npm run start:assets",
source: ".tmp/webpack_output",
latency: 1
# ...
@javierarques
javierarques / jsdom-helper.js
Last active January 12, 2022 00:51
Simulate window resize event in jsdom
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
// Simulate window resize event
const resizeEvent = document.createEvent('Event');
@javierarques
javierarques / SassMeister-input-HTML.html
Last active April 22, 2017 07:45
Alert component with Sass and CSS4 Custom Properties
<div class="Alert Alert--danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="Alert Alert--success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="Alert Alert--warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="Alert Alert--info" role="alert">
@javierarques
javierarques / sticky.js
Last active December 6, 2023 18:02
Sticky Sideabr With Vanilla Javascript. Detects scroll and set fixed the element. Live example: http://codepen.io/javiarques/pen/vKdgjR
// Sticky Nav Component
var Sticky = (function() {
'use strict';
var CSS_CLASS_ACTIVE = 'is-fixed';
var Sticky = {
element: null,
position: 0,
addEvents: function() {
@javierarques
javierarques / Twig Absolute Url Function
Last active February 3, 2016 17:49
twig function to generate absolute URL's
/**
* absoluteUrl
* twig function to generate absolute URL's
*
* @param {string} $string fixed slug appended to Url
* @param {array} [$params] array with query string params to add to the Url
*
*/
$app['twig'] = $app->share($app->extend('twig', function($twig, $app) {
$twig->addFunction(new \Twig_SimpleFunction('absoluteUrl', function ($string, $params = []) use ($app) {
@javierarques
javierarques / Toggler.js
Created December 18, 2015 12:11
Toggler JS Component. Fire CSS classes
const Toggler = (() => {
"use strict";
//
// CONSTANTS
//
const TOGGLER_ATTR = '[data-toggler]';
const TOGGLER_ATTR_TARGET = 'data-toggler-target';
@javierarques
javierarques / protractorAPICheatsheet.md
Last active August 20, 2024 11:27
Protractor API Cheatsheet