|
|
|
|
Issue #161 (Cookie Limits, Media, Git/CLI/CLI, Testing)08/18/16
| Support this week's primary sponsor: |
Today there are much better ways than cookies of storing data client-side when building apps. That being said, all developers should be relatively familiar with how cookies work and what, if any, limitations there are in the different browsers.
If you read different sources online that discuss cookies, you'll notice that many of them describe the following general limitations for most browsers: 300 cookies total, 20 cookies per domain, and about 4 KB of data per cookie. This is also stated in David Flanagan's JavaScript: The Definitive Guide, the latest edition of which is now more than five years old.
That data is generally taken from RFC2965, the older standard that defines HTTP cookies (dated October 2000). But that standard is long since obsolete, as indicated in RFC6265. In that latest document, it states the following minimum requirements for browsers:
- At least 4096 bytes per cookie
- At least 50 cookies per domain
- At least 3000 cookies total
Using this test page, you can try out the limits in different browsers. From my testing, I had the following results:
- Latest Chrome and Opera: Maximum 180 cookies per domain; 4096 bytes per cookie;
- Latest Firefox: Maximum 150 cookies per domain; 4097 bytes per cookie;
- Internet Explorer 11: Maximum 50 cookies per domain; 5117 bytes per cookie
Interestingly, IE11 was the only browser to indicate a maximum total cookie data limit per domain.
As mentioned, better storage options are now available (mainly LocalStorage), and highly recommended for larger bits of data. But cookies will likely still be in use for small bits of data, so it's good to be familiar with the limitations in the different browsers, keeping in mind that many online sources still reflect older statistics that are no longer accurate.
Now on to this week's tools!
SVG and Multimedia Tools
SVGInjector
"A fast, caching, dynamic inline SVG DOM injection library."
Vector Magic
"Automatically convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software."
SVGO
"Nodejs-based tool for optimizing SVG vector graphics files."
Datamaps.co
"A free and simple platform for creating visualizations with data maps. It allows you to upload CSV file with region data, and fully customize your map's appearance. Your map chart can be saved as PNG or SVG."
image-diff
A visual image differential tool from the developers at Uber.
Aquarelle
Create custom watercolor effects with this JavaScript library.
star-rating-svg
"A star rating jQuery plugin that uses SVG for easier customization."
Tone.js
"A Web Audio framework for making interactive music in the browser."
SVGO Compressor
"A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8."
Git, GitHub and Command Line Tools
GitFTP-Deploy
"Dead simple FTP-deployments for your smaller projects."
Mango
"Git, completely decentralised."
CodeComet
"Version control, collaboration & online coding for front-end developers."
GitHub Widget
"A widget showing your GitHub details that you can easily embed in your portfolio website."
HyperTerm
"JS/HTML/CSS Terminal. The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards."
m-cli
"Swiss Army Knife for Mac OS X." No 3rd-party dependencies, and only uses OS X commands.
DeckHub
A Desktop client for GitHub.
AKA
Alias bash command on steroids.
lint-staged
"Lint JS and CSS files staged by Git."
cz-customizable
"The customizable Commitizen plugin to help achieve consistent commit messages like the AngularJS team."
Testing and Debugging Tools
Loader.io
"A free load testing service that allows you to stress test your web-apps & apis with thousands of concurrent connections."
mydevice.io
View details on the current device being used, including viewport size, resolution, browser features, etc.
ECMAScript Version Detector
Library and online tool to check which ES version different chunks of code belong to.
HTTPolice
"A lint for HTTP requests and responses. It checks them for conformance to standards and best practices."
netmonitor
Chrome extension. "Shows background network activity of web pages after they are loaded." Useful for asynchronous loads that aren't indicated by the browser's UI.
Dependency CI
"Continuously test your dependencies. Automatic compliance testing for all of the dependencies in your application."
apimock
A very basic fake API server to help you build front-end of web applications before the backend is ready.
Prefix
"Collects all the data you need to understand what your code is doing before it goes to production. Built on Stackify's powerful, proven technology, but it's so lightweight it will never slow you down."
broken-link-checker
"Find broken links, missing images, etc in your HTML."
ChromeLens
"Chrome DevTools extension to develop for the visually impaired."
PerfTool
"This npm package displays statistics about your web pages, including Google PageSpeed Insights score, resources count, and recommendations on how to fix performance issues, html errors and much more in one custom view."
Browsera
"Automated browser compatibility testing. Browsera tests and reports cross-browser layout differences and scripting errors on your site."
Browser Sandbox
"Run any browser instantly online. Click to run with no installs. Supports all versions of Chrome, Firefox, and IE."
A Tweet for Thought
This quote might accurately describe the current JavaScript environment.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Apparently, this is what Instagram would look like on WIndows 95.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
