One of the biggest pains when working on the web is how to deal with large files images, videos, large chunks of markup without blocking the browser from doing other things like rendering whatever content is not part of the stream. At I/O this year Surma and Paul Lewis did a live coding demo of streams and web components. This got me thinking about streams and how to best leverage them to increase performance of our applications. What are streams and what are they good for According to the WHATWG Streams Living Standardhttps://streams.spec.whatwg.org/: > This specification provides APIs for creating,...
I've been looking at the CSS in JS debate for a while and one of the things that still surprises me if that people go to all these lengths to create and use namespaces for their elements when there's a way to do it already baked in the platform. If you're not allergic to XML and you've been around the web for a while you know what XML is and you may be one of those who have developed phobia to XML you have an x-girlfriend to not want to use it and do everything in JSON. But there are...
One of the first things that brought me to programming was Logo back in the mid 1980's. It wasnt the structure of the programs that you could type stuff that would make things happen on the screen. To me the magic was that you could share and that typing the same things would always produce the same results so you could iterate and do even crazier things with your designs. If running the following commands: text repeat 4 forward 90 would create a square what would happen if we started moving the turtle around without drawing anything and then run...
One thing that blew my mind was a web-based slide deck that changed a style's CSS when you edited the CSS block shown as text in the slide. Think about it... We can change the CSS of our content as we need to just by editing the CSS inline, in the same browser that is displaying the content we are styling. Awesome! Later on I changed my mind a little. CSS is too much of a pain but what if we want to change a document or create a new one and then save it or do some further processing...
There are times when the current solutions are not enough. Most of my non-Wordpress web content uses fontfaceobserverhttp://fontfaceobserver.com/ to handle web fonts and how they display on the page. We've already used @font-face to load the fonts using CSS. The script below creates one instance of Fontfaceobserver for each of the fonts we've loaded using CSS. Each FontFaceObserver instance has several methods that we'll use later in the script. We create a shortcut to document.documentElement to save ourselves typing. The last command in this section will add a fonts-loading class to the page's HTML element. javascript const mono = new...
I've always struggled to get images to fit where I need them to without giving them explicit size in pixels that will only work on one screen size. Percentages are better but I've always struggled figure out what is the right percentage and whether it'll look ok in smaller form factors. With the object-fit property and its partner object-position we get very granular control on how an element responds to the size of its content box. Used by itself, object-fit allows for mage cropping and how it alters its size inside the containing box. object-fit can take one of 5...
This feature is only available in Chrome 59 and later DevTools is awesome but sometimes can be hard to manage. There's so many tools and functions and shortcuts that it gets hard to remember everything you use unless you use it regularly. In Chrom 59, DevTools introduced a command menu similar to the one in Visual Studio Codehttps://code.visualstudio.com/ Cmd + Shift + P in Mac or Ctrl + Shift + P in Windows bring up the DevTools Command Menu, then type to filter and hit Enter to trigger the action. Typing ? will give you a list of commands you...
This feature is only available in Chrome 60 and later Lighthousehttps://developers.google.com/web/tools/lighthouse/ is a tool to test if your web content app or site meets the criteria for Progressive Web Applications and other tests to make sure your application performs well and is accessible. As of Chrome 60 you can run the lighthouse tests within DevTools Audits menu. This menu is located on the far right of the DevTools menu bar. !//publishing-project.rivendellweb.net/wp-content/uploads/2017/06/audit-menu.png DevTools Audits Menu When you access the menu you will see the Lighthouse logo and a button to begin the tests.. When you click on that button you will...
This feature is only available in Chrome 59 and later I use Criticalhttps://github.com/addyosmani/critical to create and inline the CSS for above the foldhttps://www.optimizely.com/optimization-glossary/above-the-fold/ content of a page and UNCSShttps://github.com/giakki/uncss to remove any unnecessary CSS for these web pages. This is important because in large or long-lasting projects there may be CSS that is no longer needed in a page or the whole site and it hasn't been removed out of laziness or because the people who oringally created the CSS are no longer available and sometims developers, myself included, think that if we don't use the content it won't be...
Service Workers are awesome and they are very powerful. They are also very hard to debug. DevTools has supported service workers for a while and has reorganized things around to produce the application panel. !Service Worker Panel in Chrome DevToolshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/sw-devtools-application-panel.png From here you can work with several different technologies that make Progressive Web Applications: Service Workers Local and Session Storage IndexedDB WebSQL Cookies In this section we'll work with Service Workers. The other sections of the panel are left as an exercise for the reader. In the application panel the service worker section is the second one from the top...
