Debounce Computed Properties in Vue

The following approach can be used to debounce user input that triggers the rendering of vuejs computed properties. When needed, debouncing will increase site performance and improve feature usability. In the example below a dataset is being filtered and the results are interactively shown in a table. The computation happens only once exactly 250 ms after the user stops typing in the input field. Debouncing of a computed property can be achieved by watching a proxy variable (queryTableBuffer in this case) or with the computed property's getter / setter methods.

<template lang="pug">

import { debounce } from 'lodash'

export default {
  data() {
    return {
      table: [],
      queryTable: '',
      queryTableBuffer: ''
  computed: {
    queryTableResults() {
      return extFilteredAndSortedArray(this.table, this.queryTable)
  watch: {
    queryTableBuffer: debounce(function (newVal) {
      this.queryTable = newVal
    }, 250)
  created() {
  methods: {
    generateTable() {
      this.table = extGetDataset()

Backdrop Blur

Justo, consequat vitae, tellus. ante, eleifend Aenean Etiam justo, amet, dolor. Aliquam natoque in, varius In eleifend sit pretium eget ut, enim. porttitor tincidunt. Donec pretium. massa. Quisque Vivamus Aenean vulputate Nulla Lorem dis laoreet. lorem felis, ultricies enim. dictum eget, dapibus nec, rhoncus feugiat Phasellus pede parturient vel augue. nisi dui. pede a, mus. ligula Nam felis Aenean vitae, commodo consectetuer nisi. elementum dolor Curabitur quis, fringilla Aenean imperdiet eu, quis, rutrum. et magnis ipsum Nullam Aenean montes, eu, nulla Cras viverra penatibus Integer justo. quam ligula, Cum sociis imperdiet. viverra pellentesque vel, arcu. a, mollis ullamcorper consequat vulputate ridiculus ac, leo venenatis enim ultricies elit. ultricies aliquet Donec metus eget massa tellus. nisi. quis semper sem. adipiscing dapibus. eu ut nascetur nec, Justo, consequat vitae, tellus. ante, eleifend Aenean Etiam justo, amet, dolor.

JavaScript – String Interpolation inside Regular Expressions

When you need to substitute a variable inside a regular expression you can't use the usual string interpolation in JavaScript. You have to create a RegExp object.

Let's say you have a complex regex like /^(?!.*(\w{2}).*\1)\s*(?:(?:en|de|fr|it|es)\b\s*){5}$/ and you need to dynamically manipulate the (?:en|de|fr|it|es) and the {5} parts of it.

Don't forget to escape the backslashes.

function generate_regex(array) {
  return new RegExp(

generate_regex(['en', 'de', 'fr', 'it', 'es'])


generate_regex(['en', 'de', 'fr'])


Remove unnecessary characters from fonts

This gulp task removes all unused characters from fonts. It recursively scans the build directory and injects its text contents into fontmin. The task does additionally producewoff2 files next to the default types of eot, svg, ttf and woff. It's a great post-processing routine to keep your assets small and to get rid of the keep request counts low and transfer sizes small notification in your lighthouse report.

How to Get an RSS Feed for a YouTube Channel

As Daniel Miessler pointed out it's possible to obtain an RSS feed for a youtube channel. However, you need to replace channel-external-id with channelId in his blog post.


  1. Visit a channel page

  2. View the source and then filter for channelId

  3. Add the channelId at the end of the string below

Change Sublime Text INI Comment Character

# Native high availability cluster method with optional load balancer.
# If no lb group is defined installer assumes that a load balancer has
# been preconfigured. For installation the value of
# openshift_master_cluster_hostname must resolve to the load balancer
# or to one or all of the masters defined in the inventory if no load
# balancer is present.

# default subdomain to use for exposed routes

# Configure metricsPublicURL in the master config for cluster metrics
# See:

# Enable cockpit

If you're bothered by having a semicolon ; instead of hash/pound # character as default for toggling comments in Sublime Text follow these steps to change it.

  1. Install PackageResourceViewer
  2. Open the command palette
  3. Type PRV: O
  4. Select PackageResourceViewer: Open Resource
  5. Select INI
  6. Select Comments.tmPreferences
  7. Edit the TM_COMMENT_START value from ; to # as desired
  8. Save the file
  9. Use the toggle comment functionality on an INI file and see that it now uses # instead of ;


Crystal Upgrade Failure on Linux

The error after trying to upgrade crystal on a linux server.

Downloading packages:
crystal-0.29.0-1.x86_64.rpm                                   |  28 MB   00:03
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  Installing : crystal-0.29.0-1.x86_64                                     1/1
Error unpacking rpm package crystal-0.29.0-1.x86_64
error: unpacking of archive failed on file /usr/share/crystal/src/lib_c/amd64-u
nknown-openbsd: cpio: rename
  Verifying  : crystal-0.29.0-1.x86_64                                     1/1

  crystal.x86_64 0:0.29.0-1

Fixing crystal openssl Problems on macOS

You may come across these while developing with crystal on macOS

ld: library not found for -lssl (this usually means you need to install the development package for libssl)
clang: error: linker command failed with exit code 1 (use -v to see invocation)

In crystal play context

crystal play
Listening on
ld: library not found for -lssl (this usually means you need to install the development package for libssl)
clang: error: linker command failed with exit code 1 (use -v to see invocation)
Error: execution of command failed with code: 1: `cc "${@}" -o '/Users/crstin/.cache/crystal/crystal-run-play-1-1.tmp'  -rdynamic  -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lpcre -lgc -lpthread /usr/local/Cellar/crystal/0.27.2/src/ext/libcrystal.a -levent -liconv -ldl -L/usr/lib -L/usr/local/lib`

Or in running a Kemal app context

crystal run src/
ld: library not found for -lssl (this usually means you need to install the development package for libssl)
clang: error: linker command failed with exit code 1 (use -v to see invocation)
Error: execution of command failed with code: 1: `cc "${@}" -o '/Users/crstin/.cache/crystal/crystal-run-kemal.tmp'  -rdynamic  -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lpcre -lgc -lpthread /usr/local/Cellar/crystal/0.27.2/src/ext/libcrystal.a -levent -liconv -ldl -L/usr/lib -L/usr/local/lib`

Quickly adjust DNS Server in macOS

# Clear and receive from AP
networksetup -setdnsservers Wi-Fi EMPTY
networksetup -setdnsservers "Thunderbolt Ethernet" EMPTY

# localhost
networksetup -setdnsservers Wi-Fi
networksetup -setdnsservers "Thunderbolt Ethernet"

# Cloudflare
networksetup -setdnsservers Wi-Fi
networksetup -setdnsservers "Thunderbolt Ethernet"

# Google
networksetup -setdnsservers Wi-Fi
networksetup -setdnsservers "Thunderbolt Ethernet"

# Open DNS
networksetup -setdnsservers Wi-Fi
networksetup -setdnsservers "Thunderbolt Ethernet"

# Show result
networksetup -getdnsservers Wi-Fi
networksetup -getdnsservers "Thunderbolt Ethernet"

Getting Rid Of Found Quoted Keyword Warning In Phoenix

mix phx.server
warning: found quoted keyword "test" but the quotes are not required. Note that keywords are always atoms, even when quoted, and quotes should only be used to introduce keywords with foreign characters in them

Change the following inside your mix.exs from

defp aliases do
    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
    "ecto.reset": ["ecto.drop", "ecto.setup"],
    "test": ["ecto.create --quiet", "ecto.migrate", "test"]


defp aliases do
    {:"ecto.setup", ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"]},
    {:"ecto.reset", ["ecto.drop", "ecto.setup"]},
    test: ["ecto.create --quiet", "ecto.migrate", "test"]



composer require barryvdh/laravel-cors
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"


// global
protected $middleware = [
    // ...

// or group
protected $middlewareGroups = [
    'web' => [
       // ...

    'api' => [
        // ...


// global
return [
     | Laravel CORS
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,


rails new --api

Uncomment in Gemfile

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

Edit config/application.rb

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options]

or edit config/initializers/cors.rb

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]

How to Properly Deploy a Rails App

Deploying a production ready Ruby on Rails app on a Linux Server should be the easiest thing in the world. Nevertheless, information on this subject is scarse, outdated or stunningly confusing. Even more so when using a ruby version management system like rbenv or rvm who demand for a user to have a certain environment via the shells startup script.

Puma, the built-in Ruby/Rack web server in Rails 5 is solid and describes itself as "simple, fast, threaded, and highly concurrent". We can safely...

How to Self-Host your own git repository

You can self-host your own git repository, thus avoiding services like github, gitlab, bitbucket. This gives you full control over the repositories. Make as many as you want and make them private or public as you please. Serve it under you own domain. Allow and use whatever licenses you prefer.


Gitea, which describes itself as a painless self-hosted Git service, is written in the go language (utilising the hugo generator) and is therefore highly efficient and super fast.


SSH Issues on macOS Sierra and Higher

The following enables you once more to only use ssh without ever having to enter a password or passphrase again in macOS 10.12+ .

# Normal Command

# Command for Debugging
ssh -vvv

SSH Key Creation

# Command
ssh-keygen -t ed25519 -o -a 100

# Output
Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/crstin/.ssh/id_ed25519):
Created directory '/Users/crstin/.ssh'.

Use a secure passphrase like 6R9vcrxn1z17gDn2pUSoXUSHSa2UIK

Extracting the Current Webview

wget --recursive --no-clobber --page-requisites --convert-links --no-parent


  • recursive: download the entire Web site.
  • no-clobber: don't overwrite any existing files (used in case the download is interrupted and resumed).
  • page-requisites: get all the elements that compose the page (images, CSS and so on).
  • convert-links: convert links so that they work locally, off-line.
  • no-parent: don't follow links outside the directory tutorials/html/.


Learn Regex - The Easy Way


What is Regular Expression?

Regular expression is a group of characters or symbols which is used to find a specific pattern from a text.

A regular expression is a pattern that is matched against a subject string from left to right. The word "Regular expression" is a mouthful, you will usually find the term abbreviated as "regex" or "regexp". Regular expression is used for replacing a text within a string, validating form, extract a substring from a string based upon a pattern match, and so much more.

Imagine you are writing an application and you want to set the rules for when a user chooses their username. We want to allow the username to contain letters, numbers, underscores and hyphens. We also want to limit the number of characters in username so it does not look ugly. We use the following regular expression to validate a username:

Start of the line
        |   3 to 15 characters long
        |             |
        |             |
              |          |
              |          |
              |     End of the line
letters, numbers, underscores, hyphens

Above regular expression can accept the strings john_doe, jo-hn_doe and john12_as. It does not match Jo because that string contains uppercase letter and also it is too short.

Is it possible to parse HTML with Regex?

You cannot parse [X]HTML by using Regex. Because the HTML language cannot be parsed by Regex. Regex is not a tool that can be used to parse HTML correctly. As I replied in HTML and regex questions here so many times before, using Regex will not allow you to consume HTML. Regular expressions are a poorly developed tool for understanding the constructions used by HTML. HTML is not a normal language and cannot be parsed by regular expressions. Regex queries are not equipped to divide the HTML code into its significant parts. So often, but it's not always for me. Even the irregular extended regular expressions used by Perl are not the task of HTML parsing. You're never going to let me crack. HTML is a language with sufficient complexity that cannot be parsed by regular expressions. Even Jon Pigeon cannot parse the HTML with regular expressions. Every time you try to parse the HTML code with regular expressions, the child cries the blood of the virgins, and the Russian pirates have their webapp. Parsing HTML with Regex gets the corrupted soul in the Kingdom of the living. HTML and Regex go together like love, marriage and killing of ritual children. The <center> cannot hold, it's too late. The power of Regex and HTML together in the same conceptual space will destroy your mind, like so many putty water. If you analyze the HTML code with Regex, give it to you and your blasphemous possibilities, that all of us to inhuman problems for those whose name cannot be expressed in the basic multilingual plan, it is. HTML Plus-RegExp You melt the erves of the while you observe your psyche in the onslaught of terror. Rege̿̔̉X-based HTML parser are cancer that kills StackOverflow is too late, it is too late, we can not be saved the trangession of a guaranteed Chi͡LD Regex will consume all living tissues (except HTML,) that can not, as already prophesied, dear Sir, help us, how can anyone survive this plague with HTML regex analysis, mankind has become an eternity of torture and dreadlocks with regex as a tool for HTML processing becomes a pause between this world and the frightening realm of entities C͒ͪo͛ͫrrupt (as the SGML entities, but more corrupted) a simple glimpse of the world of the ex reg parser for HTML goes to the auntyly carrying a programmer consciousness in a world of endless cries, it is, the stench Alacridi infection Regex Wil L devour the HT-ML parser, the application and the existence of all the time that Visual Basic gets only worse does not come with it com̡e̶s , ̕h̵i s un̨ho͞ly radiańcé destro҉Ying all ENLI̍̈́̂̈́ghtenment, tags HTML Lea͠Ki̧n͘g FR̶ǫm ̡yo ͟ur Eye͢s̸u ̛l̕IK͏e FL UID Pain, the song of Re̸gular exp resion analysis will fire nguish the voices of the man Mor Tal of the SP here can see that he can see you ̲͚̖͔̙î̩́t̲͎̩̱͔́̋̀ is quite t he finally turn off the man lies everything is LOŚ͖̩͇̗̪̏̈́T all that I lost the pon̷y it is , you C̶̮OMES it is I or penetrates all my face my face or H god no no noo̼O or Nato stop A * ̶͑̾̾ ̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ za̡͊͠͝LGΌ isͮ̂҉̯͈͕̹̘̱ to͇̹̺ͅɲ̴ȳ̳ TH̘Ë͖́̉a ͠P̯͍̭O̚ N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎ȩ̬̩̾͛ͪ̈́̀́͘

Have you tried using an XML parser instead? bobince

Disable SIP & Gatekeeper


csrutil status
System Integrity Protection status: enabled.

To disable the System Integrity Protection (SIP) you need to boot your Mac into Recovery Mode (CMD + R) and enter the following into the terminal.

csrutil disable
Successfully disabled System Integrity Protection. Please restart the machine for the changes to take effect.

SIP Restrictions

# Enable SIP and allow installation of unsigned kernel extensions
csrutil enable --without kext

# Enable SIP and disable filesystem protections
csrutil enable --without fs

# Enable SIP and disable debugging restrictions
csrutil enable --without debug

# Enable SIP and disable DTrace restrictions
csrutil enable --without dtrace

# Enable SIP and disable restrictions on writing to NVRAM
csrutil enable --without nvram

System Integrity Protection – Adding another layer to Apple’s security model


# Per Application:
sudo xattr -rd /Applications/

# Globally:
sudo spctl --master-disable

Letsencrypt Certificate for each Domain

Letsencrypt offers you to combine multiple domains into a single certificate or to separate them for each domain. When doing the latter you should mind the rate limits.


rsa-key-size = 4096
#server =
authenticator = webroot
webroot-path = /var/www
email = youremail@domain.tld
renew-by-default = True
agree-tos = True
certbot --config /etc/letsencrypt/cli.ini certonly -d sub.domain.tld

You can also combine a group of domains to share a single certificate.

certbot --config /etc/letsencrypt/cli.ini certonly -d domain.tld -d www.domain.tld -d sub.domain.tld


SSLCertificateFile /etc/letsencrypt/live/$servername/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/$servername/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/$servername/chain.pem

List apache vhosts


certbot --config /etc/letsencrypt/cli.ini renew

List Apache Vhosts

You can list all of your apache/httpd vhosts with this command.

# normal
httpd -S | rg '^.*namevhost (\S+) \(.*' --replace '$1' | sort -u

# with counter
httpd -S | rg '^.*namevhost (\S+) \(.*' --replace '$1' | sort | uniq -c

You need to install ripgrep or substitute it with sed.

Other useful httpd commands

Show all included configuration files.


Show all loaded modules.

httpd -M

Run syntax check for config files.

httpd -t
Syntax OK

CSS nth

nth of single type

.e:nth-child(8) { ... }
.e:nth-child(n+6) { ... }
.e:nth-child(-n+9) { ... }
.e:nth-child(n+4):nth-child(-n+8) { ... }
.e:nth-child(n+2):nth-child(odd):nth-child(-n+9) { ... }
.e:nth-child(3n+1):nth-child(even) { ... }

JavaScript Key Codes

Press any key to get corresponding code:


This prints the JavaScript codes for any key on your keyboard.

You can use the code number to assign an event to the key.

window.addEventListener('keydown', funcname, false);
function funcname(e) {

  /* up */ if (e.keyCode === 38   ) { exec_if_pressed() }
  /* dn */ if (e.keyCode === 40   ) { exec_if_pressed() }
  /* $ */  if (e.keyCode === 220  ) { exec_if_pressed() }
  // etc....

How To Pass Options With Gulp

You can pass options to your gulp task via the { key0: value, key1: value, key2: value, ... } syntax.

Example for gulp-purifycss

The task gulp-purifycss uses purifycss.

.pipe(purify(['./public/app/**/*.js', './public/**/*.html']))


.pipe(purify(['./public/app/**/*.js', './public/**/*.html'], { minify: true, info: true, rejected: false }))

Example for gulp-rsync

The task gulp-rsync uses rsync.

gulp.task('deploy', function() {
  return gulp.src('build')

How To Run A Custom Ruby Gem From Any Path

You can run custom ruby gems from any path, for instance local machine, LAN or remotely, without the necessity to go over the official ruby gem index.

Specifying a :path attribute will install the gem from that path on your local machine.

gem "foreman", :path => "/Users/pje/my_foreman_fork"

Alternately, specifying a :git attribute will install the gem from a remote git repository.

gem "foreman", :git => "git://"

# ...or at a specific SHA-1 ref
gem "foreman", :git...

How to log your IP Address

Have you you ever thought: "Mhmmm… was that me behind that IP address at this particular point in time? I wish I'd know that because THAT WOULD HELP ME A LOT TO DETERMINE IF I HAVE AN ISSUE HERE OR NOT!"

Bash script


ipcur=$(curl -s
if ! tail -n 1 ~/.cronjobs/iplog.csv | grep -q "$ipcur"; then
    printf '%s;' "$(date "+%Y-%m-%d;%H:%M")";
    curl -s | jq -r '.ip + ";"
    + .hostname + ";"
    + .city + ";"
    + .region + ";"
    + .country...

The Power of Opus Compression

Opus Compression

When you like to listen to a lot of Podcasts, lectures or audio books for instance, and you want to carry with you as much of it as you can then the opus audio codec is something you might be interested in. I rarely use this term but here it can be applied: The results blew my mind. It's astonishing how much audio you can pack on a mobile device with severe capacity limits.

I just converted this:

none 162 Files mp3, 44100 Hz, mono, s16p, 129 kb/s Total Length: 6d 14h 47min 49 Total Size: 9...

MAC Address Spoofing on OS X/macOS

This can be useful when travelling.


You can put this in your .zshrc/.bashrc/etc.

spoof () {
    getmac () {
        ifconfig "$1" | grep -o -E '([[:xdigit:]]{1,2}:){5}[[:xdigit:]]{1,2}'

    macorig=$(networksetup -getmacaddress "$1" | grep -o -E '([[:xdigit:]]{1,2}:){5}[[:xdigit:]]{1,2}')
    macprev=$(getmac "$1")
    macrand=$(openssl rand -hex 6 | sed 's/\(..\)/\1:/g; s/.$//')
    sudo /System/Library/PrivateFrameworks/Apple80211...

Execute Only If Device is Attached

Have you ever been in the situation where you needed to open an application but you only want to open this particular application if a specific device is attached? For instance, when there is a symbolic link to a huge dependent library on an external drive. Or the audio interface needs to be attached before opening the DAW.

Executing such applications without meeting these requirements can mess up your settings and you may have to manually readjust preferences, paths, do cleanups, etc. Eventually...

Rouge Syntax Highlighting

The following examples demonstrate Rouge's syntax highlighting for many different programming languages. Rouge is developed by Jeanine Adkisson. It is is a very good syntax highlighter which operates remarkably precise.

Rouge aims for the highest quality lexing in all its supported languages, even with strange features and odd corner cases.

That's right, I can confirm that rouge rather doesn't highlight at all before highlighting things wrong, which I see all the time happening with Pygments

kramdown Syntax

Source1, Source2

This is version 1.14.0 of the syntax documentation.

The kramdown syntax is based on the Markdown syntax and has been enhanced with features that are
found in other Markdown implementations like Maruku, PHP Markdown Extra and Pandoc. However,
it strives to provide a strict syntax with definite rules and therefore isn't completely compatible
with Markdown. Nonetheless, most Markdown documents should work fine when parsed with kramdown. All
places where the kramdown syntax differs from the Markdown syntax are highlighted.

Following is the complete syntax definition for all elements kramdown supports. Together with the
documentation on the available converters, it is clearly specified what you will get when a kramdown
document is converted.

Hello world - English


Once upon a midnight dreary, while I pondered, weak and weary. Over many a quaint and curious volume of forgotten lore. While I nodded, nearly napping, suddenly there came a tapping. As of some one gently rapping, rapping at my chamber door. 'Tis some visiter, I muttered, tapping at my chamber door. Only this, and nothing more. Ah, distinctly I remember it was in the bleak December. And each separate dying ember wrought its ghost upon the floor. Eagerly I wished the morrow;—vainly I had sought...