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...
I sat on Jeremy Keithhttps://adactio.com/'s presentation at AEA San Francisco on how to evaluate technologies for the web. It made me think a lot about the current iteration of the progressive enhancement and what it means debate and how do we need to accommodate all our users: those at the top end of the spectrum, the people in the middle and the next billion people who will come to our content from much slower connections, using much slower and cheaper devices and for whom data, or more specifically the cost of data, will continue to be the deciding factor on...
There are some news and changes since I last visited ES6 modules. I started hearing more and more about WebPack and how it did the one thing that Rollup doesn't.... it splits the code in different bundles based on the overall size of your Javascript files. The latest news is that modules are now supported in browsers so packaging them may or may not be as necessary any more. ES6 modules defined In ES6 each module is defined in its own file. The functions or variables defined in a module are not visible outside unless you explicitly export them. This...
I haven't looked at Service Workers in a while and wondered how much the SW libraries have changed since I last looked at them. SW-precache and SW-toolbox made creating Service Workers with dynamic caching much easier but there were two separate libraries and SW-precache required a separate file with all the SW-toolbox libraries routes in it. This made it very error prone to edit and update. Workbox.jshttps://workboxjs.org/ is the evolution of Google's Service Worker Libraries. It consolidates all Service Worker build steps into one task Gulp, Webpack and NPM Script versions available and abstracts a lot of the writing and...
Now that we have a way to create components and preview them using Fractal we can look at how we can use the same handlebars templates to build a static web site. Because I've used Gulp to build the rest of the site it's important to me that whatever site generator I work with also uses Gulp. Assemblehttp://assemble.io/ does enough of the work that it's worth putting up with its idiosyncrasies. First the bad. There used to be a Gulp plugin that would make Assembly work with Gulp. The plugin has been deprecated and people cautioned to work directly with...
