Skip to content

Instantly share code, notes, and snippets.

Avatar

Javier javierarques

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 Mar 22, 2020
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 May 18, 2020
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.