Anton Karlovskiy anton-karlovskiy

Approaches to developing in Vue/Nuxt.js

Web Page Usability Matters
PageSpeed Insights w/Lighthouse and Chrome User Experience Report
Data Saver for Chrome on Android - enable and then look at about:flags for Lite Pages and other interventions
web.dev/fast - code-labs and tooling for optimizing performance
Lighthousebot for using Lighthouse in continuous integration
Bundlesize for JavaScript budgets in CI
Start performance budgeting

Re: selfies project written in CRA and PWA

Planning of a project
- The project planning is mostly based on Fullstack Project Planning.
  
  For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.
React Project Structure
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
  
  A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()

	const STATUSES = Object.freeze({
	IDLE: 'idle',
	PENDING: 'pending',
	SUCCESS: 'success',
	FAILURE: 'failure'
	});

	const EVENT_TYPES = Object.freeze({
	FETCH: 'FETCH',
	CANCEL: 'CANCEL',

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

	const fetchAsBlob = url => fetch(url).then(response => response.blob());

	const convertBlobToBase64 = blob => new Promise((resolve, reject) => {
	const reader = new FileReader();
	reader.onerror = reject;
	reader.onload = () => {
	resolve(reader.result);
	};
	reader.readAsDataURL(blob);
	});

	// RE: https://github.com/sindresorhus/query-string
	// RE: https://bundlephobia.com/[email protected]

	// RE: https://github.com/unshiftio/querystringify
	// RE: https://github.com/Gozala/querystring

	const serializeToQueryParams = (queryObject, prefix = '') => {
	const queryString = [];
	for (const key in queryObject)
	if (queryObject.hasOwnProperty(key)) {