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...
There are times when I'm working on a design and start tweaking the design in the browser by adding attributes or making changes to the content directly in the browser and wish I could make those changes permanents. Now you can : To make a local folder's source files editable in the Sources panel: 1. Right-click in the left-side panel 2. Select Add Folder to Workspace 3. Choose location of local folder that you want to map 4. Click Allow to give Chrome access to the folder !//publishing-project.rivendellweb.net/wp-content/uploads/2017/06/workspace-detached-dev-tools-window.png DevTools detached window When I click on the left-side panel I'm show...
!Device simulation in dev tools, also allows to create custom presets and modify existing oneshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/network-throttle-1 The network throttling options inside dev tools give you a good starting point for testing what your users' experiences will be like in the devices you're targeting. !Available network condition presets and the option to add custom oneshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/throttle-index At the top of the list you have the option to add new presets and customize existing ones. I've created one customization to the 3G preset by adding latency to, in my opinion, provide a better representation of network conditions outside urban areas. !Configuring a custom network...
After a while I discovered why my blog wasn't highlighting code as I wanted it to. Plugins are too old and the Markdown plugin in Jetpack is not producing the correct HTML from the Markdown I'm writing. I've spent the last few days trying to update plugins with a recent version of Prism that has the plugins I want to use and the languages I want to use are properly configured. Instead of creating a plugin which may be a future project I've chosen to add this to my theme's functions.php and evaluate how it works and then decide if...
I've been playing with web components for a few years. Until not too long ago the biggest drawback was that only one browser supported the original v0 family of Web Component specifications. Things are looking better now. V1 of most web component specifications, Templates, shadow DOM and Custom Elements, are supported in most major browsers with HTML Imports being the only part of Web Components where vendors have not agreed on implementation and are waiting for ES6 modules to become more widely adopted before deciding where the future of this specification lies. What are Web Components For those of you...
There is a suggested change to Babel that may change the way you write your configurations, builder tasks and other aspects of your Babel configuration. In the blog post Upgrade to Babel 7 WIPhttps://babeljs.io/blog/2017/03/01/upgrade-to-babel-7 the Babel maintainers give information on how upcoming changes will affect Babel installations. The one I'm concerned about is how to use yearly plugins. The posts states that: > Instead of any yearly preset, we suggest that you use the newly created babel-preset-env which uses the correct plugins based on your environment. When configuring Babel you'd normally use the following: { "presets": "es2015", "es2016", "es2017" }...
When we last discussed encoding DASH adaptive streaming we saw that Shaka Packager creates the master file and a series of segments. We left them in the browser's cache which may force downloads and will not work when offline or with poor connectivity. Using a service worker we can create a cache for media segments so they can be stored locally for offline use. For this to work, we need to do some modifications to our standard service worker to accommodate the special requirements of DASH chunked video. The first step is to create a variable to hold the name...
