When we write Javascript we normally do it synchronously, every instruction is executed one at a time in the order they appear in the script. The script will finish once the last instruction is executed. In the example below, we log three items to the console. javascript console.log'1'; console.log'2'; console.log'3'; We will always get the same result: 1 2 3. This works great for small pieces of code or scripts that don't produce output on the browser. But sooner rather than later you will want to work on larger scripts and you will find one of the first issues with...
There are times when it's good to have a sense of how long your code takes to execute. Maybe you're troubleshooting performance or you're concerned that parts of your code are not as fast as they could be. In the beginning, you could do something like this: javascript function myHeavyTask { for let i = 1; i
If you work with CSS in JS you will soon discover that all values CSS gives the JS parser are strings that you must parse to get the data you need to continue processing the styles. This is when you use the element.style.attribute syntax. javascript // Element styles. el.style.opacity = 0.3; typeof el.style.opacity === 'string' // Ugh. A string!? // Stylesheet rules. document.styleSheets0.cssRules0.style.opacity = 0.3; The CSS Typed Object Model Typed OM adds types, methods, and an object model to CSS values. Instead of strings, values are exposed as JavaScript objects to facilitate performant and sane manipulation of CSS. Instead...
> If we grow the language in these few ways \that allow extensibility\, then we will not need to grow it in a hundred other ways; the users can take on the rest of the task. Guy Steele, Growing a Languagehttp://www.cs.virginia.edu/evans/cs655/readings/steele.pdf, 1998 ACM OOPSLA CSS Houdini is a set of APIshttps://drafts.css-houdini.org/ under development by the CSS Working Grouphttps://www.w3.org/Style/CSS/ and the Technical Architecture Group to provide users with ways to extend CSS to match their needs. The extensibility language is usually JavaScript but some of these are written in pure CSS. To translate the tech speak: Houdini will provide the hooks...
> If you're working with modern evergreen browsers, classes are the preferred way to create reusable code. They work in all modern browsers according to caniuse.comhttps://caniuse.com/feat=es6-class out of the box. Prototypal inheritance will work if you need to support older browsers. Prototypal Inheritance Before ES6 we created reusable content using functions to create objects and attaching the methods to the object's prototypehttps://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Objectprototypes. This way every object that inherits from the object will also inherit the methods attached to the prototype. In the example below the Person has the following properties: first, last, age, gender, and interests. all these properties are...
Conclusion I wrote the tweet below as a response to my original tweet. No, @AMPhtml hasn’t fully sold me on it. Too many open issues in AMP that are easy to do in non-amp. Looking at component creation and how hard it is— Carlos Araya @elrond25 April 6, 2018 As I've mentioned throughout this post the technology behind AMP is not revolutionary. It's a reaction to a problem on the mobile web and it has been taken as a way to gate keep and restrict what can be done on the web. There are many unanswered questions about AMP and...
Technical questions There are technical questions that came up when researching AMP and writing this post a few more technical questions Converting your content? In talking to people at the Roadshow I now understand that AMP is a testbed to make things better and then bring it back to the wider web community; this is an important goal. I just have issues with the way AMP is doing this. The example below is a basic sample HTML document conforming to the AMP HTML specification. html Sample document h1 {color: red} { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": "thumbnail1.jpg"...
This essay has evolved from my notes and comments from the AMP Roadshow in Sunnyvale on April 4 and feedback received since. Any factual errors are mine. Feedback is always welcome. The questions/issues I have are in bold throughout the rest of the article. at the amproadshow learning about AMP, what's next and what cool things you can do with it.I'm ambivalent about AMP and am hoping to be convinced otherwise— Carlos Araya @elrond25 April 4, 2018 What problem is AMP trying to solve? Particularly since the introduction of AMP stories and the loosening JavaScript restrictions on adding JavaScript to...
Animated GIFs are a good way to demonstrate short sequences of events or actions in your browser or application. The flipside is that the files tend to be unnecessarily large. One way to reduce the file size is to convert it to video. In this post, I'll take a look at the conversion and display of this animated "gifs". For the video conversion, we'll use FFMPEGhttps://www.ffmpeg.org/ command line utility as we've done with most of the prior work posted here. We'll use 2 video codecs to replace the GIF file: MP4 and VP9. MP4 first We do care about the...
Loading Javascript may slow down your page as the browser will follow several steps for each script the page links to and not continue until the script is fully parsed and all the associated resources loaded: The browser has no way of knowing what, if any, changes it needs to make to the page based on the script so it'll download and parse the script even if it ends up not using any of it in rendering the page itself. There are two ways we can bypass the problem of the blocking script. Which one you use will depend on...
