Issue #224 (iframe History, Uncats, CSS/HTML, Build/Deploy)11/02/17
If you've dealt with browser history in your apps, then maybe you've come across an interesting behavior with regards to how history works in combination with iframes.
Go to the following demo page. Click to go to the next page using the link provided. You'll notice there's an iframe on that new page, along with a link above the iframe.
The link has an inline click handler that forces the page to go back in the current browsing session:
I could also do the same thing using the go() method, and you could of course mimic this by simply using your browser's back button:
The default behavior is that the browser will treat the page visit inside the iframe as part of the browsing history. So, although your focus might be on the full parent page, hitting the back button (or using history scripting) will cause the iframe to go back in history while the parent page stays the same. You'll have to hit the back button again to go to the intended original page.
There is a workaround for this that might be acceptable in certain circumstances. When navigating inside the iframe, you can use the location.replace() method to change the iframe's URL, which doesn't add to browsing history:
|
location.replace( 'source2.html' );
|
Here's another demo where the problem is fixed. Try it with the back link as well as your browser's back button. And note that this wouldn't work with other ways of changing the URL via JavaScript (e.g. using location.assign() or location.href). MDN explains:
"...after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it."
Now on to this week's tools!
|
The Uncategorizables
FormAPI
Makes it easy to generate PDFs by posting data to an API. Upload PDF templates and configure form fields in a web-based editor. You can also generate PDFs by filling in an online form.
LocalSync
Clone your local and remote site. Sync DB and files for your WordPress sites with FTP / SFTP.
Word Counter
A nice online tool to check word, sentence, paragraph, character counts, and keyword density for pasted-in text.
invoicetemplate.co
Create beautiful invoices in seconds for free. Variety of templates, cloud storage, reminder service, with a Chrome extension available.
Beamer
Announce new features, your latest releases, and relevant news. Improve user engagement with a quick and easy changelog.
Infusion
Documentation builder for designers, based on Hugo, the static site generator, and makes the docs available offline as a PWA.
Sitemod.io
Chrome extension that lets anyone modify, save and share any website in real time, without having access to the source code of the website.
|
CSS and HTML Tools
Font Awesome Animation
Simple animated icons using the Font Awesome icon set and some CSS.
ColorSpace
CSS gradient generator with easy-to-use options for the gradient direction.
Icongram
Easily use icons from popular icon sets on the fly with a custom URL.
Mashup Template
A set of responsive and attractive HTML/CSS templates.
details-element-polyfill
A polyfill for the HTML details element (which still lacks support in IE and Edge).
Formcarry
Point your HTML forms to this service and they will handle the back end while you’re working on more interesting problems.
Vivify
A drop-in CSS animation library with more than 60 animation options.
Micromodal.js
Lightweight, configurable, and accessibilty-enabled JavaScript modal window with WAI-ARIA capabilities.
Classcat
0.3 KB JavaScript utility for conditionally concatenating CSS class names.
Octo.CSS
SVG and CSS-based "fork me on GitHub" corner graphic.
CSS Checkbox Library
Custom checkboxes in the form of switches and toggles for IE9+.
|
Build Tools, Deployment, etc.
Size Limit
Add this to your continuous integration service and set a size limit. If you accidentally add a massive dependency, it will throw an error.
Dependabot
Automated dependency updates. Creates pull requests to keep your Ruby, Python, JavaScript and PHP dependencies up-to-date.
Yarn
The npm alternative is now at version 1+.
electron-webpack-dashboard
Electron desktop GUI for webpack-dashboard (A CLI dashboard for webpack dev server).
webpack CLI
A CLI for the popular module bundler.
Blendid
Stand-alone blend of tasks and build tools poured into Gulp to form a full-featured modern asset pipeline. Can be used as-is as a static site builder.
prepack-webpack-plugin
A webpack plugin for prepack (the popular JavaScript source code optimizer).
babel-preset-env
A Babel preset that compiles ES2015+ down to ES5 by automatically determining the plugins and polyfills needed based on your targeted browser or runtime environments.
|
|
