You can do this by using measureText var canvas = document.getElementById(“canvas”), ctx = canvas.getContext(“2d”) canvas.width = 400; canvas.height = 200; ctx.fillStyle = “#003300″; ctx.font=”20px sans-serif”; var textString = “Hello look at me!!!”, textWidth = ctx.measureText(textString ).width; ctx.fillText(textString , (canvas.width/2) – (textWidth / 2), 100); Live Demo More elaborate demo
Quicksort (recursive) function quicksort(array) { if (array.length <= 1) { return array; } var pivot = array[0]; var left = []; var right = []; for (var i = 1; i < array.length; i++) { array[i] < pivot ? left.push(array[i]) : right.push(array[i]); } return quicksort(left).concat(pivot, quicksort(right)); }; var unsorted = [23, 45, 16, 37, 3, … Read more
It’s safer to use Date objects for datetime stuff, e.g. isLeap = new Date(year, 1, 29).getMonth() == 1 Since people keep asking about how exactly this works, it has to do with how JS calculates the date value from year-month-day (details here). Basically, it first calculates the first of the month and then adds N … Read more
Give an alternate or fallback , font-family , for lousy browsers , you can may be give sans , or sans-serif to avoid this type of issues in future.
The window.onerror handler catches Javascript errors in Chrome 13+, Firefox 6.0+, Internet Explorer 5.5+, Opera 11.60+ and Safari 5.1+. There’s already a really good answer on StackOverflow which provides a lot of information about it. It does not catch failures to load resources, though. As far as other elements (such as images) are concerned, jQuery … Read more
I just found the answer here https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ As of today you do need to use javascript: const el = document.querySelector(“.myElement”) const observer = new IntersectionObserver( ([e]) => e.target.classList.toggle(“is-pinned”, e.intersectionRatio < 1), { threshold: [1] } ); observer.observe(el); #parent { height: 2000px; } .myElement { position: sticky; top: -1px; } /* styles for when the header … Read more
Solution 1: with Lerna you can use workspace and Lerna yarn workspace & lerna ├── README.md ├── lerna.json ├── package.json ├── packages │ ├── pdf │ │ ├── package.json /* “shared-ts”: “^1.0.0” */ │ │ └── src │ ├── frontend │ │ ├── package.json │ │ └── src │ ├── mobile │ │ ├── package.json … Read more
source.onmessage is the built in function wrapper for EventSource that is triggered when new data is sent to the client. It fires when no event attribute is returned (default) and doesn’t fire when it is set. addEventListener is similar, but differs in that it listens for a specific event name, and triggers on its presence, … Read more
Arguably, the error message could be improved on this one. The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object. Vue 2 style solutions instantiate product.product_image as iterable: //… data: … Read more
Those helped me get started: React TDD Guide Using Test Driven Development with React.js to Add Multi-Select to the Drag and Drop Component React TDD Example: Unit Testing and Building a React Component With Jest, Gulp and React Test Utils Testing Flux Applications Awesome React – testing Also worth looking at Shallow Rendering