Skip to content

Instantly share code, notes, and snippets.

View alekseykulikov's full-sized avatar

Aleksey Kulikov alekseykulikov

View GitHub Profile
alekseykulikov /
Last active April 14, 2024 00:32
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

alekseykulikov /
Last active July 2, 2023 14:20
Extra features of PageSpeed Insights API

In this article, I would like to share three features of PageSpeed Insights (PSI), that is not easy to find in the official documentation. I discovered them while hacking on the Lighthouse plugin and integrating PSI to

For a context, PSI is a simple yet powerful API by Google, that audits your page using Lighthouse and provides real-world users' data from Chrome UX Report (CrUX).

1. Audit many categories with one request

By default, PSI API returns only performance category. It's possible to pass ?category argument multiple times and get a report with many Lighthouse categories using one request (available categories: performance, accessibility, best-practices, seo, pwa).

curl -i "
alekseykulikov / ct-bookmark.js
Created September 30, 2022 09:54
Bookmark version of [CT]( with some improvements
* Credit:
* Main changes:
* - use as a bookmark (toggle on/off)
* - work with any CSP (no extrnal scripts/styles)
* - fix an issue with async scripts added using inline JS (impossible to detect with css)
* - improved styles detection with [rel='stylesheet'][href]
* Add JS bookmark -> javascript:(<code below>)
alekseykulikov /
Last active August 3, 2021 20:53
Github Actions Ranking (June 18, 2020)

Github Actions is a CI/CD platform that gained a lot of popularity recently. I participated in building ⭐️ Lighthouse CI Action and was curious how well it performs.

But Github Marketplace UI shows no ranking information. Essentially, It's a search with random results; at least, I don't understand the order. I couldn't find ⭐️ Lighthouse CI Action in Continuous integration category after browsing 50 available pages (Each page shows 20 results, so it's possible to see only 1000 results, but CI category has 1469 😐).

I decided to build a custom script that crawls all categories and use Github Search (example query) to estimate usa

"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/85.0.4161.0 Safari/537.36",
"environment": {
"networkUserAgent": "Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3963.0 Mobile Safari/537.36 Chrome-Lighthouse",
"hostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/85.0.4161.0 Safari/537.36",
"benchmarkIndex": 1206
"lighthouseVersion": "6.0.0",
"fetchTime": "2020-05-31T13:08:20.759Z",
"requestedUrl": "",
alekseykulikov /
Last active October 30, 2017 07:34
lodash vs underscore size comprasion

In reply to Jeremy's tweet, that underscore is 3x smaller (simpler?) than Lodash!

Apparently, it's only true if you use <script> tag, but if you use lodash's module feature and build your project with browserify(or webpack) you get different numbers. In simple cases underscore can be 4-6 times bigger.

15020 bundle-lodash-without.js
 4820 bundle-lodash-without.min.js
 1647 bundle-lodash-without.min.js.gz
alekseykulikov / index.js
Last active December 18, 2015 20:29
Use es6 generators to simplify async calls.
* Required node >= v0.11.2
* usage: node --harmony index.js
var fs = require('fs');
var run = require('./run');
function readFile(filename) {
return fs.readFile.bind(fs, filename, 'utf-8');
alekseykulikov / terminal.log
Last active October 24, 2015 15:09
Estimate production size of npm front-end package
$ npm i -g browserify uglify-js pretty-bytes
$ npm i react
$ browserify node_modules/react | uglifyjs -m | gzip | wc -c | pretty-bytes
> 51.58 kB
$ npm i backbone jquery
$ browserify node_modules/backbone | uglifyjs -m | gzip | wc -c | pretty-bytes
> 41.99 kB
$ npm i
$ browserify node_modules/ | uglifyjs -m | gzip | wc -c | pretty-bytes
> 20.64 kB
alekseykulikov / wrap-generator.js
Created July 1, 2015 12:10
Wrap koa-like generators to express-like callbacks.
var co = require('co')
* Wrap koa-like generators to express-like callbacks.
* @param {GeneratorFunction} fn
* @return {Function}
modules.exports = function wrap(fn) {
alekseykulikov / .jscsrc
Last active August 29, 2015 14:18
Code Style: ~/.jscsrc and atom's linter + linter-jscs
"preset": "node-style-guide",
"requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties", // for external APIs
"requireCapitalizedComments": null, // why???
"requireCurlyBraces": null, // allow one lines
"requireTrailingComma": null, optional
// personal style
"maximumLineLength": { // 80 is a goal, but sometimes it's necessary
"value": 120,