Skip to content

Instantly share code, notes, and snippets.

Jens Grochtdreis jensgro

Block or report user

Report or block jensgro

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View sr-only.css
/* hide only visually */
.sr-only:not(:focus):not(:active) {
width: 1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
@jensgro
jensgro / index.html
Last active Oct 8, 2019
Vue.JS AJAX Autocomplete
View index.html
<div id="app">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Buchtitel" aria-label="Buchtitel suchen" v-model="query" @keyup="search">
<div class="input-group-append"><button class="btn btn-outline-primary" id="button">Suchen</button></div>
</div>
<div class="p-5 d-flex justify-content-center" v-if="!docs.length && query.length"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>
<div class="list-group" v-if="docs.length">
<button v-for="doc in docs" type="button" class="list-group-item list-group-item-action">{{ doc.title }}</button>
</div>
@jensgro
jensgro / index.html
Last active Oct 8, 2019
Vue-Test - Dingsdays
View index.html
<div id="app">
<form>
<label for="email">Email-Adresse</label>
<input type="email" required name="email" id="email" @keyup="validate" />
<button id="submit" :disabled="disabled">Abschicken!</button>
</form>
</div>
@jensgro
jensgro / SassMeister-input.scss
Created Sep 26, 2019
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----
// $bp-min: 300px;
//
// .test {
// color: red;
@jensgro
jensgro / SassMeister-input.scss
Created Sep 26, 2019
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----
$tokens: (
size-scale: (
300: 0.8rem,
500: 1.25rem,
@jensgro
jensgro / index.html
Created Sep 19, 2019
SVG-Filter und CSS-Filter
View index.html
<h1>Vergleich zwischen SVG- und CSS-Filtern</h1>
<p>IE 10 und 11 können leider nicht mit <a href="https://developer.mozilla.org/de/docs/Web/CSS/filter">CSS-Filtern</a> umgehen und haben auch die vorher proprietären IE-Filter nicht mehr integriert. Allerdings stellen Sie <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG-Filter</a> dar. Deshalb müssten dann alle Bilder als Teil eines SVG-Konstruktes implementiert werden. In diesem Beispiel stehen ein in SVG implementiertes Bild und ein normal implementiertes Bild nebeneinander. Beiden wurde ein Blur-Filter auferlegt. </p>
<h2>Bild im SVG</h2>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
@jensgro
jensgro / image-with-text-on-the-back-css3-and-oldie.markdown
Last active Sep 19, 2019
Image with text on the back - CSS3 and oldIE
@jensgro
jensgro / index.html
Last active Oct 2, 2019
Tabelle - ARIA mit JS
View index.html
<table class="responsive-table responsive-table--5-4 responsive-table--linearised-60-40">
<caption>Das ist eine tolle Caption für eine Tabelle</caption>
<thead>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-column">
Überschrift 1
</th>
<th class="responsive-table__col-2 responsive-table__headdata-column">
Überschrift 2
</th>
You can’t perform that action at this time.