devbyray

var emailValidation = (function(emailValidation) {
    'use strict';

    var emailValidator, emailIsValid, addClass, removeClass, hasClass, removeElement, classListSupport, eleValue, isNotEmpty, emailRegex, validateErrorElClass,
        validateErrorEl, formContainerEl, defaults, parent, validateElClass, result, atCharIndex, pointCharIndex;

    emailValidation.defaults = {
        formContainer: ".email-conformation",
        valElementClass: "email-validation-error",
        errorMessage: "Dit is geen geldig emailadres",

devbyray

var validator = (function(validator) {

		// variables including form, inputfield names(html - > name), _validate starting point
		var errorElement, firstNameField, lastNameField, messageField, emailField, inputFields, firstNameError, lastNameError, emailError, msgError, emailRegEx, err, _showError, _getElValue, _hideErrorElement, _validate, totalInputFields,
			form = document.getElementById('nawForm'),
			inputName = form.querySelectorAll(['input[name="firstName"],input[name="lastName"],input[name="email"],textarea[name="msg"]']),
			_validateOnKey = false;

		/**
		 * Show or hide error of the input field

devbyray

(function(window, document, dom, cleanSlider, conditionizr, undefined) {

  "use strict";

  var prevBtn = document.querySelector('.prev'),
      nextBtn = document.querySelector('.next'),
      playBtn = document.querySelector('.play'),
      stopBtn = document.querySelector('.stop');

    if (conditionizr.ie9) {

devbyray

var domIsReady = (function(domIsReady) {  
  var isBrowserIeOrNot = function() {
    return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
  }
  
  domIsReady = function(callback) {
    if(callback && typeof callback === 'function'){
      if(isBrowserIeOrNot() !== 'ie') {
        document.addEventListener("DOMContentLoaded", function() {
          return callback();

devbyray

{"locals": ["af", "sq", "ar-sa", "ar-iq", "ar-eg", "ar-ly", "ar-dz", "ar-ma", "ar-tn", "ar-om", "ar-ye", "ar-sy", "ar-jo", "ar-lb", "ar-kw", "ar-ae", "ar-bh", "ar-qa", "eu", "bg", "be", "ca", "zh-tw", "zh-cn", "zh-hk", "zh-sg", "hr", "cs", "da", "nl", "nl-be", "en", "en-us", "en-gb", "en-au", "en-ca", "en-nz", "en-ie", "en-za", "en-jm", "en", "en-bz", "en-tt", "et", "fo", "fa", "fi", "fr", "fr-be", "fr-ca", "fr-ch", "fr-lu", "gd", "gd-ie", "de", "de-ch", "de-at", "de-lu", "de-li", "el", "he", "hi", "hu", "is", "id", "it", "it-ch", "ja", "ko", "ko", "lv", "lt", "mk", "mt", "no", "no", "pl", "pt-br", "pt", "rm", "ro", "ro-mo", "ru", "ru-mo", "sz", "sr", "sr", "sk", "sl", "sb", "es", "es", "es-ar", "es-gt", "es-cr", "es-pa", "es-do", "es-mx", "es-ve", "es-co", "es-pe", "es-ec", "es-cl", "es-uy", "es-py", "es-bo", "es-sv", "es-hn", "es-ni", "es-pr", "sx", "sv", "sv-fi", "th", "ts", "tn", "tr", "uk", "ur", "ve", "vi", "xh", "ji", "zu"]}

devbyray

CSS Performance: We write CSS selectors wrong!

So today, I want to dive into CSS Performance. Especially I want to talk about, how you can make you selectors faster to render in the browser. So let's start with an example that every (Frontend) Webdeveloper used once in CSS.

HTML structure

So imagine that you have this html structure:

<nav class="main-navigation">
    <ul>
 <a href="">Home</a>

devbyray

HTML

<ul class="navigation navigation--main”>
 <li class="navigation__item">
  <a class="navigation__link" href="dashboard.html"></a>
  <ul class="navigation navigation--sub”>
	 <li class="navigation__item">
	  <a class="navigation__link" href="dashboard.html"></a>
 

devbyray

$module: 'navigation';
.#{$module} {

  // By default, our note has a white background…
  &__item {
  	border-top: 1px solid #ccc;
  }

  // But “featured” notes have an offwhite background
  &__link {

devbyray

// Overall feedback I see a lot in your CSS:
// Keep specificity as low as possible
// Read this article: http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/

// For the rest is your CSS not bad at all!
// Better than I expected :-)

@import "../../../../members/assets/scss/variables";
@import "../tooltip";

devbyray

// ----
// libsass (v3.3.2)
// ----

.mypage-ui {
    &--is-editable:focus {
        outline: none;
    }

    &__top-right-element {