On gists

JS -OOP ways - SO + DJPW.cz

20.4.2018 • 8.8.2022 (aktualizováno)

JavaScript-OOP JavaScript

1.js #

// define the objects:
var objLit = {
  x: 0,
  y: 0,
  z: 0,
  add: function () {
    return this.x + this.y + this.z;
  }
};

var ObjCon = function(_x, _y, _z) {
  var x = _x; // private
  var y = _y; // private
  this.z = _z; // public
  this.add = function () {
    return x + y + this.z; // note x, y doesn't need this.
  };
};

// use the objects:
objLit.x = 3; 
objLit.y = 2; 
objLit.z = 1; 
console.log(objLit.add());    

var objConIntance = new ObjCon(5,4,3); // instantiate an objCon
console.log(objConIntance.add());
console.log((new ObjCon(7,8,9)).add()); // another instance of objCon
console.log(objConIntance.add()); // same result, not affected by previous line

On gists

Sass functions cheat sheet

18.4.2018

SCSS

sass-functions.md #

Sass Functions Cheat Sheet

RGB Functions
HSL Functions
Opacity Functions
Other Color Functions
List Functions
Map Functions
Selector Functions
String Functions
Number Functions
Introspection Functions
Miscellaneous Functions

RGB Functions

rgb($red, $green, $blue) Creates a color from red, green, and blue values.

rgba($red, $green, $blue, $alpha) Creates a color from red, green, blue, and alpha values.

red($color) Gets the red component of a color.

green($color) Gets the green component of a color.

blue($color) Gets the blue component of a color.

mix($color1, $color2, [$weight]) Mixes two colors together.

==========

HSL Functions

hsl($hue, $saturation, $lightness) Creates a color from hue, saturation, and lightness values.

hsla($hue, $saturation, $lightness, $alpha) Creates a color from hue, saturation, lightness, and alpha values.

hue($color) Gets the hue component of a color.

saturation($color) Gets the saturation component of a color.

lightness($color) Gets the lightness component of a color.

adjust-hue($color, $degrees) Changes the hue of a color.

lighten($color, $amount) Makes a color lighter.

darken($color, $amount) Makes a color darker.

saturate($color, $amount) Makes a color more saturated.

desaturate($color, $amount) Makes a color less saturated.

grayscale($color) Converts a color to grayscale.

complement($color) Returns the complement of a color.

invert($color) Returns the inverse of a color.

==========

Opacity Functions

alpha($color) / opacity($color) Gets the alpha component (opacity) of a color.

rgba($color, $alpha) Changes the alpha component for a color.

opacify($color, $amount) / fade-in($color, $amount) Makes a color more opaque.

transparentize($color, $amount) / fade-out($color, $amount) Makes a color more transparent.

==========

Other Color Functions

Visit Sass Functions.

==========

List Functions

Visit Sass Functions.

==========

Map Functions

Visit Sass Functions.

==========

Selector Functions

selector-nest($selectors...) Nests selector beneath one another like they would be nested in the stylesheet.

selector-replace($selector, $original, $replacement) Replaces $original with $replacement within $selector.

More at Sass Functions.

==========

String Functions

unquote($string) Removes quotes from a string.

quote($string) Adds quotes to a string.

str-length($string) Returns the number of characters in a string.

More at Sass Functions.

==========

Number Functions

percentage($number) Converts a unitless number to a percentage.

round($number) Rounds a number to the nearest whole number.

ceil($number) Rounds a number up to the next whole number.

floor($number) Rounds a number down to the previous whole number.

abs($number) Returns the absolute value of a number.

min($numbers...) Finds the minimum of several numbers.

max($numbers...) Finds the maximum of several numbers.

random([$limit]) Returns a random number.

==========

Introspection Functions

feature-exists($feature) Returns whether a feature exists in the current Sass runtime.

variable-exists($name) Returns whether a variable with the given name exists in the current scope.

global-variable-exists($name) Returns whether a variable with the given name exists in the global scope.

function-exists($name) Returns whether a function with the given name exists.

mixin-exists($name) Returns whether a mixin with the given name exists.

inspect($value) Returns the string representation of a value as it would be represented in Sass.

type-of($value) Returns the type of a value.

unit($number) Returns the unit(s) associated with a number.

unitless($number) Returns whether a number has units.

comparable($number1, $number2) Returns whether two numbers can be added, subtracted, or compared.

call($name, $args…) Dynamically calls a Sass function.

==========

Miscellaneous Functions

if($condition, $if-true, $if-false) Returns one of two values, depending on whether or not $condition is true.

unique-id() Returns a unique CSS identifier.

On gists

Nette: Ajaxové ovládání komponenty

17.4.2018

Nette AJAX

readme.md #

Nette ajaxové komponenty a snippety

Instalace

Nette sandbox: https://github.com/nette/sandbox
Nette ajax: https://github.com/vojtech-dobes/nette.ajax.js
nette.ajax.js a spinner.ajax.js přidáme do šablony @layout.latte
Nahradíme soubory HomepagePresenteru
Někam (např. app/components) umístíme komponentu

On gists

Ul to select (for responsive navigation)

10.4.2018

JavaScript jQuery PHP Responsive

example.js #

$(function(){

    var select = $("select");
    $("nav a").each(function(){
        
        var $this = $(this);
        var text = $this.text();  
        var level = $this.parents("ul").length;
        var indent = '';
        if (level > 1)
        {
            indent = str_repeat("\u2013", level);
        }
        select.append('<option>'+indent + text+'</option>');
    
    
    });   



});


function str_repeat(string, times) {
  var repeatedString = "";
  while (times > 0) {
    repeatedString += string;
    times--;
  }
  return repeatedString;
}

On gists

Nested table rows (without nesting)

10.4.2018

JavaScript jQuery

nested.css #

.parent {
    color: green;
}
.child {
    color: blue;
}

On gists

is element in view while a scrolling?

9.4.2018

JavaScript jQuery

demo.html #

<h2>Scroll Down! &dArr;</h2>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

On gists

ghost-element-vertical-align.css

5.4.2018

SCSS CSS trick

ghost-element-vertical-align.css #

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

On gists

Curated list of useful gulp plugins for awesome and easy frontend web development.

29.3.2018

Gulp

gulp-modules.md #

Curated list of useful gulp plugins for awesome and easy frontend web development.

Other lists

https://rrrepo.co/repo/GulpJS

Tutorials

Notes

Resolve "Watchify takes longer after each change" by adding babel transfrom to the watchify instead of rebuild.
Make Watchify faster by reducing the default delay option.
Filter watch events, example do processing on new files files
Automaticly bump version changes

Global

main-bower-files - fetches all files that meet filter criteria from main bower dependencies. Usefull to filtering out font files '**/*.{eot,svg,ttf,woff,woff2}' and copy them to /dist/fonts/
wiredep - adds links to bower depencies files to html/js/css which hold the correct comment tag
gulp-sourcemaps - build source maps. Use this instead of building sass or minifier if you do more work to those files afterwards, for example autoprefix the css.
gulp-watch - better then gulp.watch, because listens to new files
gulp-cached - in-memory caching for faster builds
gulp-concat - concatenate files
gulp-rename - rename files
gulp-zip - zip files
gulp-remember - remembers files that have passed through it and only adds files that has ever seen back into the stream.

Javascript

gulp-uglify - minify js
browserify - for usage with gulp check recipes
envify - replaces process.env.NODE_ENV with a environment string which is set during compilation. Must have for React production!

CSS

gulp-sass - compile sass
gulp-postcss - pipe css through several processors, but parse css only once. Example use prefixing, css-mqpacking the files on one parse
css-mqpacker - pack same media query rules into on media query rule
gulp-csso - minifies css, compared to other minfiers combines identical css
autoprefixer-core - autoprefix css without worrying about browser specific prefixes. Use this instead of gulp-autoprefixer if using gulp-postcss
gulp-sprites-preprocessor - generate sprites from css file
gulp-base64 - encode images to data URI
critical - extracts and inlines critical css for first render

HTML

gulp-useref - parses selected files, checks for build comments which when is used to combine files. Its possible to fetch multiple builds and then do some specific work with each of them for example minimize css and jshint javascript. Prefer this to gulp-inject
gulp-inject - A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
gulp-minify-html - minify html
gulp-substituter - replace matched strings in files for defined values

IMAGES

gulp-imagemin - minify images
gulp-svgmin - minify svg
gulp-responsive - create different image versions
gulp-sharp - resize images

Helpers

del - delete files/folders using globs
opn - open files, websites, executables, crossplatform
gulp-load-plugins - autoload gulp plugins from package.json into an javascript object
gulp-size - echo filesize of selected files
gulp-if - adds conditionals in gulp pipeline
gulp-plumber - prevent pipe breaking caused by errors from gulp plugins. Example by compiling react, sass, ..
Browser syncing - comparision of BrowserSync, CodeKit, LiveReload
- browser-sync
- gulp-livereload
gulp-streamify - wrap old gulp plugins with stream support. Example with usage of gulp-browserify
gulp-notify - make notifications then tasks complete, start, ..
gulp-merge - merge multiple stream operation into one task
gulp-duration - track task durations

Testing

gulp-istanbul - istanbul unit test coverage plugin for gulp

On gists

jQuery - proxy

28.3.2018

JavaScript jQuery

jquery-proxy.js #

// immediately invoke fn
// nahrazka

 $('#myElement').click(function() {  
      (function(el){
         setTimeout(function() {
              // Problem! In this function "this" is not our element!
            el.addClass('colorme');
        }, 1000);
      })($(this)); // self executing function   
    });

On gists

Gulp - example file

27.3.2018 • 28.3.2018 (aktualizováno)

Gulp

gulp2.js #

var gulp = require('gulp');

var clean = require('gulp-clean');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');

var bases = {
 app: 'app/',
 dist: 'dist/',
};

var paths = {
 scripts: ['scripts/**/*.js', '!scripts/libs/**/*.js'],
 libs: ['scripts/libs/jquery/dist/jquery.js', 'scripts/libs/underscore/underscore.js', 'scripts/backbone/backbone.js'],
 styles: ['styles/**/*.css'],
 html: ['index.html', '404.html'],
 images: ['images/**/*.png'],
 extras: ['crossdomain.xml', 'humans.txt', 'manifest.appcache', 'robots.txt', 'favicon.ico'],
};

// Delete the dist directory
gulp.task('clean', function() {
 return gulp.src(bases.dist)
 .pipe(clean());
});

// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
 gulp.src(paths.scripts, {cwd: bases.app})
 .pipe(jshint())
 .pipe(jshint.reporter('default'))
 .pipe(uglify())
 .pipe(concat('app.min.js'))
 .pipe(gulp.dest(bases.dist + 'scripts/'));
});

// Imagemin images and ouput them in dist
gulp.task('imagemin', ['clean'], function() {
 gulp.src(paths.images, {cwd: bases.app})
 .pipe(imagemin())
 .pipe(gulp.dest(bases.dist + 'images/'));
});

// Copy all other files to dist directly
gulp.task('copy', ['clean'], function() {
 // Copy html
 gulp.src(paths.html, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist));

 // Copy styles
 gulp.src(paths.styles, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist + 'styles'));

 // Copy lib scripts, maintaining the original directory structure
 gulp.src(paths.libs, {cwd: 'app/**'})
 .pipe(gulp.dest(bases.dist));

 // Copy extra html5bp files
 gulp.src(paths.extras, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist));
});

// A development task to run anytime a file changes
gulp.task('watch', function() {
 gulp.watch('app/**/*', ['scripts', 'copy']);
});

// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'imagemin', 'copy']);

Gists

1.js #

sass-functions.md #

Sass Functions Cheat Sheet

RGB Functions

HSL Functions

Opacity Functions

Other Color Functions

List Functions

Map Functions

Selector Functions

String Functions

Number Functions

Introspection Functions

Miscel­laneous Functions

readme.md #

Nette ajaxové komponenty a snippety

Instalace

example.js #

nested.css #

demo.html #

ghost-element-vertical-align.css #

gulp-modules.md #

Other lists

Tutorials

Notes

Global

Javascript

CSS

HTML

IMAGES

Helpers

Testing

jquery-proxy.js #

gulp2.js #

Miscellaneous Functions