anton-karlovskiy

Approaches to developing in Vue/Nuxt.js

anton-karlovskiy

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

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

anton-karlovskiy

• 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

anton-karlovskiy

// 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)

anton-karlovskiy

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).

anton-karlovskiy

JakeChampion/fetch#201

anton-karlovskiy

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);
});

anton-karlovskiy

// RE: https://github.com/sindresorhus/query-string
// RE: https://bundlephobia.com/result?p=query-string@6.13.1

// 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)) {

anton-karlovskiy

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()