Skip to content

Instantly share code, notes, and snippets.

Javier javierarques

Block or report user

Report or block javierarques

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@javierarques
javierarques / form-validation.js
Last active Mar 2, 2018
Form Validation using HTML5 constraint API
View form-validation.js
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 Jan 16, 2018
fetchJsonp example: fetching Flickr feed images
View fetch-jsonp.js
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 Aug 22, 2017
waitUntilElementExists.js: Wait DOM element exists in the page with vanilla JS and Promises
View waitUntilElementExists.js
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 Aug 22, 2017
Middleman 4 and Webpack 3 integration. Use Middleman with External Pipeline.
View config.rb
# ...
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 Aug 22, 2019
Simulate window resize event in jsdom
View jsdom-helper.js
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 Apr 22, 2017
Alert component with Sass and CSS4 Custom Properties
View SassMeister-input-HTML.html
<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 Apr 3, 2019
Sticky Sideabr With Vanilla Javascript. Detects scroll and set fixed the element. Live example: http://codepen.io/javiarques/pen/vKdgjR
View sticky.js
// 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 Feb 3, 2016
twig function to generate absolute URL's
View Twig Absolute Url Function
/**
* 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 Dec 18, 2015
Toggler JS Component. Fire CSS classes
View Toggler.js
const Toggler = (() => {
"use strict";
//
// CONSTANTS
//
const TOGGLER_ATTR = '[data-toggler]';
const TOGGLER_ATTR_TARGET = 'data-toggler-target';
View protractorAPICheatsheet.md
You can’t perform that action at this time.