Clippy

CSS

• color-mix(in srgb, red 25%, blue)

CSS x JS

• change custom property on :root/html: document.documentElement.style.setProperty(--var-name, val)

VIM basics

• Exiting: :q,
  • modified/force: :q!
  • write changes + quit :wq
• Modes:
  • Insert (i)
    • esc back to normal mode
    • +p paste from clipboard
  • Command (:)
  • Visual (v)
• Deleting
  • character: x
  • line dd
• Undo: u
• Saving: :w
• Commnads
  • Go to line 2 :2
  • running shell command :!<command>
• Settings
  • show linenumbers :set number

Source

resources clipboard 📋

• {JSON} Placeholder – fake API returning JSON

Link mixing bowl

Data

• Translated list of country names in diffrent Formats w/ codes

Testig & Security

• Test Data: Email Test Data writeup by All Things Quality
• Input validation: Testing for Input Validation by Owasp
• SQL Injection: (Testing for) SQL Injektion by Owasp
• General: Owasp Cheatsheet series

More

• XSS/CSP
  • Postcards from the post-XSS world
  • A few things beyond the scope of Content Security Policy

Scala on macOS / OSX

Install (w. homebrew)

1. First, check if the reqired Java version is instaled java --version . Scala requires at least Version 1.8.
   If not, install AdoptOpenJDK with Homebrew Cask: brew cask install adoptopenjdk
2. Install scala: brew install scala
3. Verify with scala -version or running directly scala and outputting something like println("Moshi moshi").

Run script files

First compile with scalac providing filename/-path (including extension). This generates a file with the class name in the folder defined in the package entry (or, if omitted, in the same as the scala file) then run it by calling scala followed by the method name (without extension)

scalac script.scala
scala script

Scriptfile anatomy

// package name
package ch.lrnz.example // binary will be generated in ch/lrnz/example

// imports
import import ch.lrnz.example.Functions // all, as 'package'
import import ch.lrnz.example.Utils._   // all, as single classes/methods
import java.util.Date


object myObject {

  def main(args:Array[String]): Unit = {
      // Void. 
      // Needed somehow? Otherwise: Compiling Error.
  }

  def myMethod(param1:Double,param2:Double):Double = {
    // do sth and be sure to return a Double.
  }

}

Notes on greener Websites

Notes from Tom Greenwood: Zero Carbon Emission talk (WordCamp Europe 2017)

• Internet carbon emission is approx. the same as Germany or Turkey (the worlds 6. in electicity use [behind CN, US, India, Japan, Russia]) with a total emisson of 300 milion tonns of CO2 [2016/17]
• WordPress makes up for about 27% of the Internet [2017]
• The main electricity culprits are probably streaming services linke YouTube, Amazon Prime …

• • check: thegreenwebfoundation.org
• Reduce Filesize, cache, remove unused files (media library)
  • Because data = energy = carbon
  • cache: plugin (wp super cache / w3total) and server-side (varnish)
• «Carbon offset» = (financially) compensate for energy usage / co2 emission by supporting renewable energy (companies) or the reduction of co2

Literature

• Designing for sustainability

Links

• WebsiteCarbon – estimate Carbon Emission per user
• thegreenwebfoundation.org – hosting greenness check
• ecograder.com – website grading based on page speed, greenweb foundation et al.
• webpagetest.org -> section ‚content breakdown‘ of the report to see which content is the heviest
• WP-Tavern: Celebrate Earth Day (…)
• Greenpeace ClickGreen Report (Services, not hosters)
• Low Tech Magazine: Solar
  • läuft rein auf Solar-Panel betriebener Raspery-Pi, performance optimiert

CodeKit extensions

Uglify for ES6+

Reason: The built in uglify lib does not support ES6+ and throws an error if it stumbles upon something like const.

Solution: Use the uglify harmony branch (uglify-es) instead via a CodeKit hook

1. Check if uglify-es ist already installed: npm list -g uglify-es . If not install it globaly: npm install uglify-es -g (see the harmony repository )
   
2. Add a new hook in the CodeKit project peferences to run a shell script on any file which inputFileName ends with .js
3. Use the following script to compress and mangle this file  uglifyjs $CK_INPUT_PATH --compress --mangle -o $CK_OUTPUT_PATH

See the Comandline Usage section of the uglify-es repo for more options and the CodeKit hook help for constants for the CodeKit part of the deal.

Spotify API

Quick notes to start using the spotify web API

• Spotify Dashboard (client keys etc)
• js web api wrapper (github)
  • src/spotify-web-api.js
• Spotify web api tutorial
• Spotify web api docs

Checkout

updated: 08.04.2018

• passive event listener
• polyfill.io – auto feature detect & polifill
• js: .map(), .reduce() .filter, eg here: JavaScript’s Map, Reduce, and Filter (not checked) or Wes Bos’s javascript 30 array cardiac episodes
  
• bling.js – jQueys $ wrapper & goodies for vanilla js
• 
  

Front-End Checklist

thedaviddias/Front-End-Checklist

iOS 8 supports video Autoplay …

when

• video is muted – either through the 'muted' attribute or has no soundtrack at all
• video is visible – in viewport or by css/js

see: New <video> Policies for iOS on webkit.org (25.7.16)

According to Paul Irish, autoplay is now supported across mobile browsers:

ob_start ( php Ausgabepuffer)

Während die Ausgabepufferung aktiv ist werden Scriptausgaben (mit Ausnahme von Headerinformationen) nicht direkt an den Client weitergegeben sondern in einem internen Puffer gesammelt. [php.net]

• ob_start()  – Aktiviert/startet Ausgabepuffer (callback parameter möglich, siehe php.net Beispiel)
• ob_get_contents()  – gibt puffer als String zurück
• ob_flush() / ob_end_flush()  – gibt den Puffer an client aus (bei ersterem bleibt Ausgabepuffer erhalten)
• ob_end_clean()  – löscht den Puffer

(mehr …)

Mobile menues

CSS only Hamburger Menues

• Animating CSS-Only Hamburger Menu Icons – callmenick.com (Demo)

  Less: Hamburger -> X

  @menu-toggle_width: 48px;
  @menu-toggle_height: @menu-toggle_width;
  @menu-toggle_bar-height: 4px;
  @menu-toggle_padding-horz: 9px;
  @menu-toggle_spacing: 8px;
  @menu-toggle_color: #fff;
  @menu-toggle_transition-duration: 250ms;
  
  .menu-toggle {
      display: block;
      position: fixed;
      overflow: hidden;
      right: 0;
      top: 0;
      margin: 0;
      padding: 0;
      width: @menu-toggle_width;
      height: @menu-toggle_height;
      font-size: 0;
      text-indent: -9999px;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      cursor: pointer;
      transition: background @menu-toggle_transition-duration;
      z-index: 99;
  
      &:focus {
          outline: none;
      }
  
      span {
          display: block;
          position: absolute;
          top: @menu-toggle_height/2 - @menu-toggle_bar-height/2;
          left: @menu-toggle_padding-horz;
          right: @menu-toggle_padding-horz;
          height: @menu-toggle_bar-height;
          background: @menu-toggle_color;
      
          &::before,
          &::after {
              position: absolute;
              display: block;
              left: 0;
              width: 100%;
              height: @menu-toggle_bar-height;
              background-color: @menu-toggle_color;
              content: "";
  
              transition-duration:@menu-toggle_transition-duration,@menu-toggle_transition-duration;
              transition-delay:@menu-toggle_transition-duration, 0s;
          }
  
          &::before {
              top: (@menu-toggle_spacing + @menu-toggle_bar-height/2)*-1;
              
              transition-property: top, transform;
          }
  
  
          &::after {
              bottom: (@menu-toggle_spacing + @menu-toggle_bar-height/2)*-1;
              
              transition-property: bottom, transform;
          }
  
  
      }
  
      .menu-open & {
          background-color: #cb0032;
  
          span {
              background: none;
  
              &::before {
                  top: 0;
                  transform: rotate(45deg);
              }
  
  
              &::after {
                  bottom: 0;
                  transform: rotate(-45deg);
              }
  
              &::before,
              &::after {
                  transition-delay: 0s, @menu-toggle_transition-duration;
              }
          }
  
      }
  
  }

   

xdebug

Install

[1]: xdebug.org/docs/install
[2]: packagecontrol.io/packages/Xdebug%20Client#xdebug