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:
Here's another demo
location.replace( 'source2.html' );
). 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!
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.
Clone your local and remote site. Sync DB and files for your WordPress sites with FTP / SFTP.
A nice online tool to check word, sentence, paragraph, character counts, and keyword density for pasted-in text.
Create beautiful invoices in seconds for free. Variety of templates, cloud storage, reminder service, with a Chrome extension available.
Announce new features, your latest releases, and relevant news. Improve user engagement with a quick and easy changelog.
Documentation builder for designers, based on Hugo, the static site generator, and makes the docs available offline as a PWA.
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.
CSS gradient generator with easy-to-use options for the gradient direction.
Easily use icons from popular icon sets on the fly with a custom URL.
A set of responsive and attractive HTML/CSS templates.
A polyfill for the HTML details element (which still lacks support in IE and Edge).
Point your HTML forms to this service and they will handle the back end while you’re working on more interesting problems.
A drop-in CSS animation library with more than 60 animation options.
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.
Add this to your continuous integration service and set a size limit. If you accidentally add a massive dependency, it will throw an error.
The npm alternative is now at version 1+.
Electron desktop GUI for webpack-dashboard (A CLI dashboard for webpack dev server).
A CLI for the popular module bundler.
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.
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.