Skip to content

Instantly share code, notes, and snippets.

View blia's full-sized avatar
🦄

Kyrylo Yakovenko blia

🦄
  • Kharkiv, Ukraine
View GitHub Profile
@blia
blia / test.md
Last active August 3, 2021 10:21

Необходимо создать react приложение для мобильных устройств.

Приложение содержит 2 страницы(главная и страница с изделиями) и кнопкой меню.

При начальной загрузке страницы, изделия не выводятся, а выводится главная страница с текстом - "выберите категорию в меню" При нажатаии на кнопку меню - открывается меню поверх основной страницы.

Меню содержит список категорий и имеет скрол. Меню занимает всю высоту экрана.

Категории загружаются по ссылке - https://6109138bd71b67001763973c.mockapi.io/api/v5/categories

const mysql = require("mysql");
const { path, srcPath, host, user, password, database } = require("../config");
///
function exec(connection, query) {
return new Promise((res, rej) => {
connection.query(query, function(err, data) {
if (err) {
rej(err);
@blia
blia / proxy.md
Last active February 20, 2019 19:12

index.js

const express = require('express');
// $ npm i glob
const globSync   = require('glob').sync;

let app = express();

let proxies = globSync('./proxies/**/*.js', { cwd: __dirname }).map(require);
@blia
blia / pi-home.js
Last active February 14, 2019 19:35
const miio = require('miio');
const ws2812b = require('rpi-ws281x-native');
const { discover } = require('@w4f/lgtv/src/discover');
const { connect } = require('@w4f/lgtv/src/connect');
const { showFloat } = require('@w4f/lgtv/src/commands');
const { Strip, initStrip } = require('./Strip');
const { findCube, findDoorbell } = require('./utils');
async function initTV() {
let { address } = await discover(2000);
@blia
blia / draft.jsc
Last active November 18, 2017 14:25
Idea for defining web components
// Javascript component draft
// pure js with 3 new declarations Props, Styles and Template
import Link from 'link-component';
import PropTypes from 'prop-types';
Props engine PropTypes {
text: string = 'Hello'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bluetooth Web API</title>
</head>
<body>
<button class="bt">BT</button>
<script>
let lamp = null
@blia
blia / test.js
Last active April 18, 2017 13:17 — forked from RedDevilHat/test.js
var previewWidth = 320, // ширина превью
previewHeight = 240, // высота превью
maxFileSize = 5 * 1024 * 1024, // (байт) Максимальный размер файла (2мб)
selectedFiles = {},// объект, в котором будут храниться выбранные файлы
queue = [],
image = new Image(),
imgLoadHandler,
isProcessing = false,
errorMsg, // сообщение об ошибке при валидации файла
previewPhotoContainer = document.querySelector('#preview-photo'), // контейнер, в котором будут отображаться превью
let price = 234
, tax = price * 0.05;
function currency(strings, ...expressions) {
const regExp = /^:c(\((.+),(.+)\))?/;
const local = (string, value) => {
const [currency, locale] = regExp.exec(string).slice(2);
return value.toLocaleString(locale, { style: 'currency', currency });
}

##Избавляемся от презентационных классов

###CSS: with modules & nesting(PostCSS/Sass/Less/Stylus)

Как происходит сейчас. Обычно мы используем презентационные классы. Популярная, но не лучшая практика. Довольно частый кейс - добавить какое-то состояние компоненту. Мы в css создаем класс-модификатор is-active.

style.css

.action {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bluetooth Web API</title>
</head>
<body>
<input class="range" id="r" value="255" max="255" type="range"/>
<input class="range" id="g" value="255" max="255" type="range"/>
<input class="range" id="b" value="255" max="255" type="range"/>