Issue #309 (HAR Data, Frameworks, Testing, Mobile)06/20/19
Later in this issue, I include a link to a tool that lets you view all third-party script and image resources loaded at a given URL. That basic concept is similar to what Trent Walton discusses in Itemizing Third-Party Scripts. That article is about a year and a half old, but has some interesting info in it on examining network requests in your browser's developer tools.
In both Chrome and Firefox's Network tab, after viewing a fresh set of loaded resources, you can right-click the list and save the data as a HAR file, which is stored as JSON. In Edge there's a disk icon that represents the "Export as HAR" option. The screenshot below shows this option in Edge as the mouse hovers over it:
Export as HAR option in Edge
I haven't tested other browsers, but I imagine there's something similar in those as well.
Once you have the file, you can find an appropriate app to open it and deal with the data as you please. Handy to be able to do this if you want to examine a large application that loads hundreds of resources. Trent has a few more details in his post, so be sure to check that out in full.
Now on to this week's tools!
|
Front-end Frameworks
JavaScript & DOM E-Books Bundle - $12.99
A collection of 200+ JavaScript and DOM API coding tips in 3 e-books. EPUB, MOBI, and PDF formats, with 200+ interactive CodePen demos. All book code and demos now updated with ES6 syntax. promoted
Brevis
CSS toolkit engineered for high performance and scalable web applications.
React PWA Boilerplate
Opinionated but customizable setup to get up and running with a working sample Progressive Web App.
Minimal Stylesheet
A minimal stylesheet in under 1k of CSS. Just enough to make a page not look awful.
jTools
A collection of lightweight, responsive, common JavaScript web components to help you bring the best user experience to your projects, independent of the platform.
Materialize
Now at version 1+ (details). A modern responsive front-end framework based on Material Design.
Reakit
Now at version 1+ Beta. Toolkit for building accessible rich web apps with React.
dialog-web-components
Set of React components for building messaging applications.
electron-react-boilerplate-minimal
An Electron, React (16.8) boilerplate for minimalists. Comes with webpack, Babel, Electron, reactn, and an example app using React Hooks.
lit-html
An efficient, expressive, extensible HTML templating library for JavaScript.
|
Testing and Debugging Tools
Zero to Hero: Flask Production Recipes
Flask is a great way to get up and running quickly with Python applications, but what if you wanted to make something more robust? This article shares some tips and useful recipes for building a complete production-ready Flask application. sponsored via ThoughtLeaders
Sqreen
Application security management platform that offers a modern approach to security in production for web applications and cloud workloads.
PHP Insights
The perfect starting point to analyze the code quality of your PHP projects.
Is JS Enabled?
Just a simple page that tells you if JavaScript is enabled in the current browser. Might be useful for testing obscure browsers to ensure scripting is turned off.
prop-sets
A test tool to help generate every possible instance of a component in JavaScript + TypeScript.
Interactor.js
A composable, immutable, asynchronous way to interact with components or applications like a user would.
Hawkeye
Lets you conduct eye tracking tests on an iOS device, no extra hardware needed.
Run JavaScript
Chrome extension to run custom JavaScript for specific websites.
Tag Checker
Enter a URL and this online tool will list all the third-party image and script resources loaded on that page.
ts-prune
Remove unused exports in your Typescript project with zero configuration.
Jest
The popular JavaScript testing framework is now at version 24+ (details).
|
Mobile Tools
Zero to Hero: Flask Production Recipes
Flask is a great way to get up and running quickly with Python applications, but what if you wanted to make something more robust? This article shares some tips and useful recipes for building a complete production-ready Flask application. sponsored via ThoughtLeaders
Capacitor
Now at version 1+ (details). Invoke Native SDKs on iOS, Android, Electron, and the web with one code base. Optimized for Ionic apps, or use with any web app framework.
Flawless App
A tool for iOS developers to compare the expected design and the real app right inside iOS Simulator.
Swift
The popular mobile app language for iOS is now at version 5+ (details).
react-native-responsive-screen
Make React Native views responsive for all devices with the use of 2 simple methods.
Sherlock
Requires Xcode. Give your iOS Simulator superpowers. Edit views and layout constraints in real time, simulate running on other devices, and jump straight to the source code, all from your Simulator.
MongoDB Mobile
Brings the power of MongoDB and the document model to your device. Same database, same access patterns – from IoT, iOS, and Android mobile devices to your back end.
Metacode
Mac app. Code faster in natural language. Converts natural language into code in real time, so you don't have to switch out of your text editor to look up code.
React Native AwesomeButton
A performant, extendable, production ready ReactNative component that renders an animated set of 3D UI buttons.
RNPixel
React Native building blocks. Modular React Native components that you can plug into your workflow or project.
Reactive Search
React, React Native, and Vue UI components for building data-driven apps with Elasticsearch.
|
A Tweet for Thought
Google's Katie Hempenius on how websites are getting larger at a pretty alarming rate.
Send Me Your Tools!
Made something? Send links via Direct Message on 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...
I don't include too many design-related tools in this newsletter, but for any designers or aspiring ones, you might like Undesign, a categorized collection of design tools and other resources.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
