Motivation Sometimes you encounter websites which seem to have time traveled from 1999. No responsive UI, no widgets, just plain html input fields and selects. Time to improve these sites 🙂 Greasemonkey overview Greasemonkey is a browser plugin which lets you inject client-side JavaScript into the webpage just as the developer could have intended to…
<head> <script src=”../js/constants.js” type=”module”></script> <script src=”../js/script.js” type=”module”></script> </head> constants.js export const projects = [ “Project-A”, “Project-B”, “Project-C”, ]; script.js import {projects} from “./constants.js”;
Calculator for 4 rings 1. Ring 2. Ring 3. Ring 4. Ring Value Tolerance brownredorangeyellowgreenbluepurplegreywhite blackbrownredorangeyellowgreenbluepurplegreywhite blackbrownredorangeyellowgreenbluepurplegoldsilver brownredgreenbluepurplegoldsilver 0Ω 0% Calculator for 5 rings 1. Ring 2. Ring 3. Ring 4. Ring 5. Ring Value Tolerance brownredorangeyellowgreenbluepurplegreywhite blackbrownredorangeyellowgreenbluepurplegreywhite blackbrownredorangeyellowgreenbluepurplegreywhite blackbrownredorangeyellowgreenbluepurplegoldsilver brownredgreenbluepurplegoldsilver 0Ω 0%
I got an “Invalid Host Header” error when running a VueJs app on a linux machine with npm run serve To work around this you can put the following code into you vue.config.js file: module.exports = { // options… devServer: { disableHostCheck: true, } }
HTML <my-component params=’from: “foo”‘></my-component> JS class MyViewModel { constructor(params) { console.log(params[“from”]); } } ko.components.register(‘table-edit’, { template: “, viewModel: { createViewModel(params) { return new TableViewModel(params); }, } });
Dealing with KnockoutJS I came across some newer features of the JavaScript language ES6 TL;DR: don’t use var anymore when You declare variables. Some examples:
After I’ve introduced You to Yarn I will show You more client side tools in this post. Grunt is a task runner which comes in handy for a lot of setup and configuring work e.g. concatenating and minimizing JavaScript or CSS files To get started You can add grunt via yarn to your project yarn…
Fiddling around with the wire webapp which is available on GitHub I came across yarn. Yarn is a package manager like npm which accesses the same repositories. The design goals are reproducibility of builds, speed and security. Installation npm install -g yarn or on macOS
PyCharm amazes me every time. Although it is first and foremost a python IDE you can do full stack web development with it, i. e. you have code completion for HTML, CSS, JavaScript and even TypeScript, CoffeeScript. I wanted to code some node.js stuff and Jetbrains already got a plugin for PyCharm. Before installation: https://www.jetbrains.com/help/pycharm/2017.1/node-js-and-npm.html…
$(function() { console.log( “ready!” ); }); is the short form for: $( document ).ready(function() { console.log( “ready!” ); }); Very unintuitive, this does not work: $(“input#myInput”).bind(“change”, function(){ }); Instead of “change” You have to use “input” $(“input#myInput”).bind(“input”, function(){ });