A Pen by Jens Grochtdreis on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// By @coderitual | |
// https://twitter.com/coderitual/status/1112297299307384833 | |
// Remove any duplicates from an array of primitives. | |
const unique = [...new Set(arr)] | |
// Sleep in async functions. Use: await sleep(2000). | |
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms))); | |
// Type this in your code to break chrome debugger in that line. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Overview of placeholder-image services | Übersicht von Platzhalterbilder-Diensten</h1> | |
<!-- Übersicht: https://www.paulund.co.uk/image-placeholder-apis --> | |
<ul class="imageservicelist"> | |
<li> | |
<h2><a href="http://unsplash.it">Unsplash.it</a></h2> | |
<img class="flexible" src="http://unsplash.it/400/300" alt="Unsplash.it" /> | |
</li> | |
<li> | |
<h2><a href="http://lorempixel.com/">Lorem Pixel</a></h2> | |
<img class="flexible" src="http://lorempixel.com/400/300/" alt="Lorem Pixel" /> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Animated line headings | |
*/ | |
h1 { | |
display: flex; | |
align-items: center; | |
width: 100%; | |
box-sizing: border-box; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(".el").on("click", function(){ | |
// hier kommt Dein Zeug hin | |
}); | |
$(".el").on("mouseenter", function(){ | |
// hier kommt Dein Zeug hin | |
}); | |
$(".el").on("mouseleave", function(){ | |
// hier kommt Dein Zeug hin |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.page {width:700px; height:auto; background-color: #fff; margin:auto; margin-top:0px;} | |
.body { | |
margin:0; | |
padding:0; | |
background-color:#fff; | |
background-image:url(../img_all/header/header1.jpg); | |
background-repeat:no-repeat; | |
} | |
.body2 { |
Forked from: http://codepen.io/rhizovuns/pen/yqcmk and converted to Sass
A Pen by Jens Grochtdreis on CodePen.
- Gecko Reflow Visualization
- css-stacking-contexts-wtf
- critical-rendering-path
- why-do-browsers-match-css-selectors-from-right-to-left
- getting-started-with-the-webkit-layout-code
- improving-css-performance-fixed-position-elements
- BlinkOn 5: Paint and Compositing Deep Dive
- a-quick-overview-of-chromes-rendering-path
- [render-blocking-css](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-b