A rather geeky/technical weblog, est. 2001, by Bramus
Great, and free, video course by Wes Bos (whom you really should follow on Twitter). So, you’ve done a few courses and read a few books but still don’t feel great about your relationship with JavaScript. How do you get better? Build things. Lots of things. Build 1,000 things. Keep it up and don’t stop. …
Continue reading “JavaScript30 – Build 30 things with vanilla JS in 30 days with 30 tutorials”
Δnow allows you to take your JavaScript (Node.js) or Docker powered websites, applications and services to the cloud with ease, speed and reliability. Every time you deploy a project, Δnow gives you a unique URL to it (even before build processes are complete!). When it’s time to take your deployment to production, you simply pick …
From the folks over at Tumblr: Add support for Apple’s Live Photos in web browsers. Install it using npm, or include the dist file: npm install –save laphs You can make Laphs work with existing elements: <img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/> <script>LivePhotos.initialize();</script> Or, alternatively, directly create new instances: const livePhoto = new LivePhotos.LivePhoto(el, options); Laphs: Live …
Don’t change any properties besides opacity or transform! Hide content in plain sight with opacity: 0; and pointer-events: none; Don’t animate everything at the same time Slightly increasing transition delays makes it easy to choreograph motion Use a global multiplier to design in slow motion (and then speed everything up later) Take videos of your …
Most of the time when you are navigating and reading a code-base, you need to jump between required/imported (whatever jargon your programming language uses) files. The “Go to Definition” functionality of Sublime falls short for most languages since jumping between these required files needs some knowledge about how the language or package manager of the …
Say you have an object like this: const obj = { firstName: ‘John’, lastName: ‘Doe’, age: 50, eyeColor: ‘blue’ }; Using lodash’s forEach you can easily loop over this object, with easy access to both the key and the value: _.forEach(obj, function(value, key) { console.log(key + ‘ ‘ + value); }); But what about ES2015? …
Continue reading “ES6 ES2015: Looping over an Object with keys and values”
Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>. The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback(). class Markdown extends HTMLElement { constructor() { super(); …
Continue reading “Rendering Markdown using Custom Elements v1”
One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it): To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement. Example Code: class CustomProgressBar extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'closed'}); …
Continue reading “Web Components: Introducing Custom Elements”
Great snippet by Benjamin De Cock: var supportsES6 = function() { try { new Function(“(a = 0) => a”); return true; } catch (err) { return false; } }(); The critical test is the a = 0. All browsers supporting default parameters have a fairly complete support of ES6 — for example, Edge 13 will …