A userstyle that makes you wait ten seconds before entering a Hacker News thread. I use stylus to manage mine.
.subtext {
display: inline-block;
background: linear-gradient(to left, transparent 50%, #f60 50%) right;
A userstyle that makes you wait ten seconds before entering a Hacker News thread. I use stylus to manage mine.
.subtext {
display: inline-block;
background: linear-gradient(to left, transparent 50%, #f60 50%) right;
Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.
The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.
<script>
// require vue-resource...
new Vue({
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
// Run this from your browser console on your meetup event page (http://www.meetup.com/AngularJS-Utah/events/183104032/) | |
(function () { | |
// Query document for attendees and select a random one | |
const list = document.querySelector('ul.attendees-list').children, | |
item = list[Math.floor(Math.random() * list.length)], | |
name = item ? item.querySelector('h4.text--bold').innerText : 'N/A'; | |
// Remove item so they can only be selected once | |
item && item.parentNode.removeChild(item); | |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!
\