Skip to content

Instantly share code, notes, and snippets.

Avatar

Stephan Schmitz eyecatchup

View GitHub Profile
@eyecatchup
eyecatchup / vue.config.js
Created September 25, 2020 10:57
(Vue.js) Webpack dev server config to use a (corporate) proxy
View vue.config.js
const HttpsProxyAgent = require('https-proxy-agent')
const proxy = new HttpsProxyAgent('http://1.2.3.4:3128')
module.exports = {
// ...
configureWebpack: {
devServer: {
// ...
proxy: {
@eyecatchup
eyecatchup / search-devtools-history.md
Created May 24, 2019 07:06
Search Chrome Devtools history
View search-devtools-history.md

Search Chrome Devtools history

  1. Undock the console (click on the icon in the bottom-left corner, ![undock icon][1]).
    (if you don't see ![the undock icon][2], but ![][3], then hold the mouse pressed for a few seconds to get the desired icon)
  2. Press Ctrl + Shift + J to open the console for this console. (On OSX use Cmd + Option + i)
  3. Use the following snippet to get an array of matches for your search term:
const searchHistory = query => {console.dir(JSON.parse(localStorage.getItem('consoleHistory')).filter(function(item){ return ~item.indexOf(query);}))}
searchHistory('token')
@eyecatchup
eyecatchup / smooth-scrolling-polyfill.md
Last active April 6, 2022 19:52
Smooth Scroll behavior polyfill
View smooth-scrolling-polyfill.md

The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. To date this has only been implemented in Chrome, Firefox and Opera.

There's a complete polyfill here (3.3KB minified). But most of the times, the following is enough for me (641 bytes minified):

smooth-scrolling-poyfill.js

Use as: scrollToElem('#elem-selector');

@tkrotoff
tkrotoff / FrontendFrameworksPopularity.md
Last active February 6, 2023 18:00
Front-end frameworks popularity (React, Vue, Angular and Svelte)
View FrontendFrameworksPopularity.md

Findings: React is by far the most popular front-end framework/library (and continues to grow faster). In addition, React is more loved and "wanted" than most front-end frameworks (although it is more used: satisfaction tends to decrease with popularity).

Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.

Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979

Stack Overflow trends

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs%2Cvuejs3

@surma
surma / package.json
Created April 18, 2018 15:07
Boilerplate for quick one-off TypeScript projects. Just run `npm start`
View package.json
{
"name": "tsquickstart",
"version": "1.0.0",
"description": "Boilerplate for quick one-off TypeScript projects. Just run `npm start`",
"scripts": {
"init": "test -f tsconfig.json || (tsc --init -t ESNext -m ESNext && npm install)",
"start": "npm run init && concurrently \"npm run watch\" \"npm run serve\"",
"serve": "http-server",
"watch": "tsc -p . --watch",
"build": "tsc -p ."
View getCurrentPosition.js
/* Helper function, required if jQuery is not available */
var ajax = function ajax(method, url, callback) {
var xhr = !!window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function() {4 == this.readyState && callback(xhr)};
xhr.open(method, url, true);
xhr.send();
};
function do_something(coords) {
// Do something with the coords here
@eyecatchup
eyecatchup / git-tricks.md
Created June 26, 2017 22:27
Git Tricks
View git-tricks.md

Git Tips & Tricks

Oups Tricks

The "I forgot something in my last commit" Trick

# first: stage the changes you want incorporated in the previous commit
 
# use -C to reuse the previous commit message in the HEAD
View css-compressors.md

CSS Compression


Resources to help comparing & evaluating different CSS compressing techniques in general, and specifically different open-source CSS compressor implementations, with a clear focus on, but not limited to, JS/NodeJS based tools.

(CSS) Compression Techniques

"Long, fragile lists of self-contradictory rules"
Douglas Crockford on CSS

View MutationObserver.js
(function(window) {
"use strict";
var mutations = {
attrib: [],
childs: {
add: [],
del: []
}
};
@chrisveness
chrisveness / crypto-aes-gcm.js
Last active February 6, 2023 10:45
Uses the SubtleCrypto interface of the Web Cryptography API to encrypt and decrypt text using AES-GCM (AES Galois counter mode).
View crypto-aes-gcm.js
/**
* Encrypts plaintext using AES-GCM with supplied password, for decryption with aesGcmDecrypt().
* (c) Chris Veness MIT Licence
*
* @param {String} plaintext - Plaintext to be encrypted.
* @param {String} password - Password to use to encrypt plaintext.
* @returns {String} Encrypted ciphertext.
*
* @example
* const ciphertext = await aesGcmEncrypt('my secret text', 'pw');