Web Projects

also containing some Java because of Wicket & Stuff like that...

Easy configure inline JS variables with Wicket

There is probably a better way to do this, but I don't know how, so I made this little hack.

Create a <span style="display:none" wicket:id="valueToChange" id="val"></span> and change the content dynamically in Wicket using:

add(new Label("valueToChange", getValue()));

Finally get the value into your JS code using var value = $("#val").val;.

Bootstrap & Designs

I really like bootstrap. It makes webdev a lot easier (and my pages look kind of awesome now). But there are also designs or plugins to make bs even more awesome.

Bootstrap Material Design by Fez Vrasta is the Design I currently use on this page. As the name says, it's an implementation of Google's Material Design. It also offers those neat ripple effect you can see on buttons. It's free (except you want to donate) and it's source is on GitHub.
BOOTSTRA.386 Chris McKenzie which aims to make any bootstrap page look like a computer interface from the 80s, is the design I use on my GitHub Page and I think it looks totally awesome but it's a lot of work to get it all up and running. Especially this super-cool page building animation took a long time for me to set up. This is also free except for donations and it's source is also on GitHub.

Theater.js

Theater.js is a JS library which tries to emulate human typing behaviors including mistakes. I haven't used it yet, but I will surely do so in the future because it looks frickin' amazing.

Theater.js is also available at GitHub.

Wavesurfer.js

Wavesurfer.js is a JS library for visualizing audio (files) in a waveform using WebAudio and Canvas.

Wavesurfer.js is also available at GitHub.

fullPage.js

fullPage.js is a really easy to use library which lets you create beautiful full-page websites with multiple slide directions and more.

It's also on GitHub.

placehold.it

Placehold.it is a awesome webapp which makes creating image placeholders way too easy.

For example if you want a 300x200px placeholder you would use http://placehold.it/300x200 as source and you'd get:

Placeholder

Pexels, Zero licensed stock pics

Pexels is a website where you can find over 2,700 stock photos which are licensed under the Creative Commons Zero (CC0) license. That means any photo you find there is free to reuse in your projects. Awesome, isn't it?

Emmet

Emmet is a shortcut toolkit for web developers. Here are some awesome snippets:


The following snippet let's you create a default Bootstrap panel:

.panel.panel-default>.panel-heading>h2.panel-title^.panel-body

Substracting different units in CSS

Have you ever come to the pleasure of doing math in your CSS or LESS code?

You might have noticed that this won't work the way you probably tried it the first time. I tried something like this:

.my-element {
	width: 100px - 50vw
}
			

For me this was completely correct. The width of my element is half the viewport width (50vw) subtracted by 100 pixels. But any browser ignores the second unit (vh in this case) and just sticks with pixels. So the width of my element was 50 pixels.

TL;DR: There is a calc() function in CSS which does that for you. Just do it like this:

.my-element {
	width: calc(~"100px - 50vw");
}