return false;
"problemMatcher": "$tsc-watch", [name]: value// Every set of 6 spheres has its own counter which increases more rapidly for shorter paths
text-align: left; "isBackground": true, { </div>export const toUserInfo = (token: string): { data: JwtContents } => return {// Each set also cycles through a series of "orders of the spheres" for every time they start their animation.
#......G..........G......# }
const hrefSet = ["https://www.facebook.com/jiri.swen", "", "", "https://nl.linkedin.com/in/jiriswen", "", ""];
z-index: 100; position: absolute;export function getDocHeight() { return users} z-index: 100; transition: filter 0.2s ease; }
public String getId() {
newImg = document.createElement("img");
path += ` L ${$(b.style.left)}, ${$(b.style.top) + $(b.style.height)}`; transition: filter 0.2s ease; color: #FF8EB7; let newIconSet = []
const {name, value} = event.target [payload.id]: payload}}
a { letter-spacing: 1vw; padding-top: 0; this.state.email || '' "${workspaceFolder}/out/**/*.js" position: absolute; switch (type) {
} left: 0; text-shadow: 0.2vw 0.2vw 0 #FF89A5;// Constants to impact flow of spheres
width: auto; currentSphereOrders[j] = 0;
public String toString() {
#FFEAF2} }
final private String id;
* @see {@link Edge.java}
text-align: right; *
} onChange={ this.handleChange } />#settings-bt-profile {} body {#......G.........G.......# position: relative;########################## font-weight: 600; margin-top: 144px;// the animation-action that's about to follow, and also an array of all the
.left-triangle { return true;
#........G.....G.........#
#icon-jumble { 10% {clip-path: polygon(42% 0, 100% 0, 100% 89%, 0 100%, 0 0);} <input type="password" name="password" id="password" value={ }win 3 result = prime * result + ((id == null) ? 0 : id.hashCode());
} * @see {@link Graph.java}
#........................# html.clientHeight,/* Colour scheme: (dark to light) <div>} {}##########################} animation: polygonic forwards 10s;}.left-triangle:hover { iconSets.push(newIconSet);
text-align: center;import * as jwt from 'jsonwebtoken'; * A node of a network/graph.
...state, "tasks": [
This side is also the one that loves to analyse the world in order to contribute to it: e.g. it's really fulfilling for me to become deeply familiar with a hugely complex system and then be able to actually contribute to it. Or, the one that completely drools over the implications of a newly introduced programming concept. font-size: 18px;}img.icon:hover {export function mapRange(num, inMin, inMax, outMin, outMax) {}
name Small Labyrinth of Doom color: #FFAACB; public Vertex(String id, String name) {
import {ADD_USER, UPDATE_USER, UPDATE_USERS} from '../actions/users'export default (state = null, {type, payload}) => { "outFiles": [body { letter-spacing:0.5vw; }
newImgContainer.appendChild(newA);
newA.style.position = "absolute";
font-family: Lato;}#FFAACB user-select: none;} user-select: none;h1, h2, h3, h4, h5, h6 { "preLaunchTask": "npm: watch" return id;
* https://github.com/vogellacompany/codeexamples-java/blob/master/de.vogella.algorithms.dijkstra/src/de/vogella/algorithms/dijkstra/model/Vertex.java
import {TINY_BOOK_BASE_BOTTOM, TINY_BOOK_HEIGHT} from './BOOKS';let newImgContainer = document.getElementById("new-icons");
p, li { text-align: center; height: 100vh;// Use IntelliSense to learn about possible attributes.}img.moving-icon:hover {export function addLike(fromId, toId) {import React, {PureComponent} from 'react' ); "args": [img.icon { text-decoration: none; path += ` L ${$(b.style.left) + $(b.style.width)}, ${$(b.style.top)}`; color: #FFEAF2; this.state.password && ...state,#FF8EB7}
padding: 20px 0; if (id == null) {
#FFDDEB left: 0; toId,// A launch configuration that compiles the extension and then opens it inside a new window default: width: 60px; books.forEach((b, i) => { }, {}) }
} "name": "Extension", background-color: #FFEAF2; </form> for (let i = 0; i < 6; i++) {
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 right: 40%; }
// Hover to view descriptions of existing attributes. right: 0;// the spheres follow after one another and then also some "randomness" to make the whole thing feel more organic.
} <div> text-align: left; <button type="submit">Sign up</button> "presentation": {} this.id = id;
Though I wanted to make it spiffy and responsive, but then the whole thing started to die slowly as some small glitchings caused the whole page to look like crap ¯\\\_(ツ)\_/¯ 15% {clip-path: polygon(36% 0, 100% 100%, 100% 21%, 0 83%, 0 0);} @Override
#.....###........###.....# font-weight: bold;[Click here to see it in action](https://modest-ritchie-26c33d.netlify.com) right: 0; position: relative; body.offsetHeight,# My code and me} return false;
const sphereOrders = [[3,5,2,1,4,0],[0,1,2,3,4,5],[1,4,0,2,5,3],[5,4,1,2,0,3],[1,2,4,3,0,5],[2,5,4,1,0,3],[3,4,0,5,2,1]]
} "runtimeExecutable": "${execPath}",// Preparatory work: lots of copies of the social media spheres are created and put in a 2D array for
@Override
animation: textfly backwards 2s; "name": "Extension Tests", this.state.password !== this.state.confirmPassword && left: 5vw;} newA.appendChild(newImg);
} "type": "extensionHost",} 97% {clip-path: polygon(42% 0, 100% 0, 100% 35%, 0 100%, 0 0);}h2.right { }, float: left;// (because it's the percentage of the total length), and within every set a delay is applied to make
sphereOrders[currentSphereOrders[j]].forEach(function(i) {
export default class SignupForm extends PureComponent {} this.state.password || '' return Math.max(/**
"outFiles": [## The technical fetishist const html = document.documentElement; <label htmlFor="confirmPassword">Confirm password</label> color: #FF5977; path += 'Z'; // This is for closing the path
font-style: normal;let svg = canvas.getElementsByTagName("path");
position: absolute;.settings-item {.fly-in h1 {#settings-filters {
html.offsetHeighth2.left { animation-delay: 2s; "version": "0.2.0", case USER_LOGOUT: }In the text below this I've categorised these in two _'sides'_. }) let path = `M ${$(books[0].style.left)}, ${$(books[0].style.top) + $(books[0].style.height)}`; font-weight: normal; <div> newA = document.createElement("a");
@media screen and (max-width: 1100px) { "group": {export const ADD_DISLIKE = 'ADD_DISLIKE'; margin-left: 38px; transition: transform 0.5s ease;} "args": [ let k = 0;
toId, }); z-index: 100; font-size: 4em; e.preventDefault() } state = {} if (getClass() != obj.getClass())
} position: absolute; font-size: 10px; newImg.src = icons[i].src;
this.state.confirmPassword &&import {USER_LOGOUT} from '../actions/users' "type": "extensionHost", "configurations": [ return false;
handleChange = (event) => { } "script": "watch", } text-shadow: 5px 5px 0 #FFCCE1; height: 135px; 0% {transform: translateX(-200%);} </div> ],for (let j = 0; j < svg.length; j++) {
## The daydreamerimg.moving-icon {const speed = 2;
stroke-width:2;#FF89A5} flex-direction: row; this.state.confirmPassword || '' font-size: 100px; "reveal": "never" filter: brightness(0.7) saturate(2.5) hue-rotate(10deg);} transition: filter 0.2s ease; ] width: 284px; {export const toJwt = (data: JwtContents): string =>}const increments = [];
@keyframes polygonic { letter-spacing: 1vw; [payload.id]: payload margin: 20px auto; return getDocHeight() - window.innerHeight; const body = document.body; currentSphereOrders[j]++;
} svgLengths.push(svg[j].getTotalLength());
}This is the side that sometimes makes me get into a frenzy of coding a project with 20 editor tabs open at the same time, writing all of them at the same time to just realise what I want to achieve as quickly as possible. And then comes the technical fetishist, to actually make the code 'good'. It's quite a good combination, these two sides! /*height: 279px;*/ id: number; transition: transform 0.2s ease;
// See https://go.microsoft.com/fwlink/?LinkId=733558const counters = [2,2,2,2,2,2,2,2,2,2];
font-family: 'Montserrat', sans-serif; case UPDATE_USER: jwt.verify(token, secret) as { data: JwtContents };#setting-buttons { margin-top: 32px;a:hover { font-size: 4vw; right: 0;} display: flex; width: 107px; color: #FF5977;.fullscreen-width { return path; return { <form onSubmit={this.handleSubmit}>// lengths of the SVG curves and the corresponding amount to increment their counters with
<input type="password" name="confirmPassword" id="confirmPassword" value={ margin: 0 50px; margin: 0 auto; transform: translateX(-2.5vw); height: 60px; right: 5vw; * @release 30/08/2010
export const calculateBookShadow = (bookClassName) => {let canvas = document.getElementById("icon-jumble");
html.scrollHeight, newImg.className = "moving-icon";
#........................# "preLaunchTask": "npm: watch" return ( path += ` L ${$(b.style.left)}, ${$(b.style.top)}`; ], <label htmlFor="password">Password</label>html { font-weight: bold; } else if (!id.equals(other.id))
padding: 0 100px 100px; public String getName() {
} * @see {@link DijkstraOperations.java}
bottom: 0; } onChange={ this.handleChange } /> background-color: #FFCCE1;{ "type": "npm", Vertex other = (Vertex) obj;
transform: translateX(2.5vw); 0% {clip-path: polygon(78% 0, 100% 0, 100% 100%, 0 100%, 0 0);} 100% {transform: translateX(0%);}The state will contain the users in an object with the game ID as key animation-delay: 12s;interface JwtContents { let ownCounter = (counters[j] - spaceBetweenSheres * k - 0.1 * j - 0.5 * (j % 2)) % 1;
transition: filter 0.2s ease; filter: brightness(0.7) saturate(2.5) hue-rotate(10deg); transition: transform 0.5s ease;}const secret = process.env.JWT_SECRET || '9u8nnjksfdt98*(&*%T$#hsfjk'; "${workspaceFolder}/out/test/**/*.js"const svgLengths = [];
color: #FFEAF2; fromId,#...........E............# return null if (other.id != null)
}requestAnimationFrame(move); max-width: 800px; newA.href = hrefSet[i];
text-align: center; return payload.reduce((users, user) => {For the Codaisseur Code Academy, we were asked to make a web page introducing ourselves. This is what I came up with. } onChange={ this.handleChange } /> min-height: 66px;#settings-settings { if (counters[j] % 1 < (increments[j] + 0.00001)) {
} 25% {clip-path: polygon(36% 0, 100% 100%, 100% 21%, 0 83%, 0 0);} } }); return false;
<label htmlFor="email">Email</label> }, position: absolute; "version": "2.0.0", const b = books[books.length - 1 - i];}}const expirationTime = 3600 * 2;
role: 'user'|'admin';#FF5977 ], path += ` L ${$(b.style.left) + $(b.style.width)}, ${$(b.style.top) + $(b.style.height)}`;export function addDislike(fromId, toId) {.right-triangle { jwt.sign({ data }, secret, { expiresIn: expirationTime }); if (currentSphereOrders[j] !== 6) {
# First evarrr website }
position: relative; "runtimeExecutable": "${execPath}",img {} else {
public int hashCode() {
const currentSphereOrders = [0,1,2,3,4,5,6,0,1,2];
}
.cool-animation img { text-shadow: 0.2vw 0.2vw 0 #FF89A5; final int prime = 31;
return name;
font-size: 4vw; "request": "launch", margin-top: 0;*/ @Override
public boolean equals(Object obj) {
name: string;}@keyframes textfly {export const ADD_LIKE = 'ADD_LIKE'; "--extensionDevelopmentPath=${workspaceFolder}" z-index: -1;} } });
width: 100%; <p style={{color:'red'}}>The passwords do not match!</p>#FFCCE1 body.scrollHeight, ]// for the documentation about the tasks.json format left: 40%;#FF6699 left: 0;h1 { this.name = name;
font-size: 16px;export const getTinyBookStackTop = (size) => TINY_BOOK_BASE_BOTTOM - size * TINY_BOOK_HEIGHT;#settings-profile {}There are a bunch of principles that define me as a programmer. */ this.props.onSubmit(this.state)I think of programming as an art. When I have the time for it I love to refactor code multiple times, to become extremely elegant and readable. I also get a lot of satisfaction out of making systems more and more intelligent/efficient. */
newA.target = "_blank";
.right-triangle:hover { left: 0;h2.normal {#settings-bt-settings { 100% {clip-path: polygon(100% 2%, 100% 2%, 100% 100%, 0 83%, 0 19%);} return result;
svg.path { /*justify-content: space-between;*/let icons = document.getElementsByClassName("icon");
} "isDefault": true} 50% {clip-path: polygon(21% 0, 100% 61%, 100% 68%, 0 22%, 0 0);}} type: ADD_DISLIKE,const spaceBetweenSheres = 0.07;
Sometimes the way I look at code is as a means to realise an end. I sometimes have the craziest ideas, or rather, with any project that I get deep into I see all these possibilities of things that could be added or changed etc. to make it better or more interesting... }
fromId, return {
return (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; if (this == obj)
position: relative; case ADD_USER: width: 60px; line-height: normal; * @author vogella: released under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Germany
margin: 0;} position: absolute;.social-media-plug { "request": "launch", }
}#........................# z-index: 99; newIconSet.push(newA);
position: absolute;@charset "UTF-8"; for (let j = 0; j < iconSets.length; j++) {
stroke: red; } /*margin-left: 24px;*/ }
return name;
increments.push(1 / svgLengths[j] * speed);
I did remove most of the social media links for privacy reasons. if (i !== 0) font-weight: normal;#..........###...........# users[user.id] = user} iconSets[j][i].style.transform = "translate(" + (svg[j].getPointAtLength(ownCounter * svgLengths[j]).x -15) * 0.10 + "vw, " + (svg[j].getPointAtLength(ownCounter * svgLengths[j]).y -15) * 0.08 + "vh)";
I went with a *certain* aesthetic. Hahah. Not too unsatisfied with how it came out. books.forEach((_, i) => { { "kind": "build", /*margin-left: 27px;*/ transition: transform 0.2s ease; * @see {@link DijkstraAlgorithm.java}
this.setState({ return state type: ADD_LIKE,} const $ = (px) => parseFloat(px);public class Vertex { ////from http://www.vogella.com/tutorials/JavaAlgorithmsDijkstra/article.html#copyright-and-license
payload: { /*margin-left: 24px;*/const iconSets = [];
} )} font-weight: normal; line-height: 22px; <input type="email" name="email" id="email" value={ return true;
], final private String name;
} requestAnimationFrame(move); // A function calling itself 60 times per second, yeah that's definitely a good idea
} return {@import "animate.css"; render() { case UPDATE_USERS: text-shadow: 0.1em 0.1em 0 #FFAACB; text-align: center;function move() {
</div> payload: { k++;
filter: brightness(1);{ } } const books = document.querySelectorAll(bookClassName); overflow-x: hidden!important;#settings-bt-filters {export function getBottomScrollPos() { int result = 1;
"--extensionTestsPath=${workspaceFolder}/out/test" "--extensionDevelopmentPath=${workspaceFolder}", letter-spacing: 30px; handleSubmit = (e) => { margin: 0 22px 22px 0px; if (obj == null)
counters[j] += increments[j];
/*
ABOUT
osu! db manipulator