Web-технологии

Около 3 месяцев назад я уже писал статью про это приложение, тогда это были еще первые наброски без четкой структуры и с крайне ограниченным функционалом. У приложения было всего 7 методов. Что ж в сегодняшнем релизе их уже 28.

С тех пор функционал сильно расширился, теперь в приложении есть методы для работы с файлами и папками, что собственно говоря было и тогда, но появилась возможность использования его как полноценной базы данных, создание коллекций и реализации CRUD. А также были добавлены методы для хранение файлов без обработки, что то вроде storage.

Сразу оговорюсь, что данная статья является лишь обзором, но не как не документацией. Так если надумаете попробовать приложение вам все же придется ее почитать.

Теперь более детально.

За основу приложения был взят npm модуль fs. Так что если приложение вернуло вам ошибку, то то что было в блоке error нужно гуглить в контексте модуля fs, а не Gh-database или ghc-db.

Приложение написано на nodejs, то бишь это обычный сервер к которому можно обращаться посредством POST запросов. Подробнее о них можно почитать в документации: https://github.com/GreenHouseControllers/GH-database

Для удобной работой с приложением был написан npm модуль - ghc-db. Думаю не стоит останавливаться на том что такое npm модули, как их устанавливать и так далие.

Прежде чем работать с приложением нужно сделать коннект с ним. Для этого есть метод connect, в него вы должны передать токен. Токен вы задаете в файле config в файлах Gh-database. Подробнее об этом читайте в документации.

Для работы с файлами есть:

createDir/removeDir - для создания/удаления папок и createFile/removeFile - соответственно для файлов.

readFile/writeFile - для чтения/записи файлов.

rename - для переименования файлов и папок.

Для работы с файлами имеющими расширение .json, есть отдельный набор методов

readJson/writeJson - для чтения записи файлов.

getElement - возвращает ответ по ключу.

pushElement/deleteElement - для добавления и удаления элемента в массиве.

Немного о функционале базы данных

Для создание и удаления коллекций используются методы createCollection и removeCollection соответственно.

Имеются методы для CRUD, по аналогии с MongoDB, но метод read возвращает всю коллекцию. Для получения одного объекта по параметрам есть метод get.

Так же вы можете переименовывать коллекцию с помощью метода renameCollection

Функционал файлового хранилища реализован в трех методах:

upload - для загрузки файлов

remove - для удаления файлов

download - для скачивания файлов

Обращение к файлам происходит по тому имени с которым он был загружен.

Для того чтобы получить токен, можно воспользоваться методом login. Но чтобы создать пользователя нужно использовать метод register, для которого уже нужен токен.

Также среди методов админа есть метод getErrorLog, который возвращает полный массив объектов с ошибками в формате json.

Данная версия еще все же сырая. Но я рад буду если вы заинтересуетесь данным приложением. Жду конструктивной критики, предложений, переделок, багов.

Будем рады если вы напишите простые примеры с использованием приложения и модуля ghc-db. Присылайте их в комментариях к статье и в телеграм, Вы можете перейти в группу в телеграмме где можете высказать свое мнение, предложить собственные идеи, поделится чем то новым. Сообщения касательно Gh-database присылайте с #ghDb в начале сообщения.

Ссылка на группу: https://t.me/joinchat/LvAn_FR2r9crJGKqP_aYYA

Привет рыцарям вёрстки.

Зацепил меня пост Многолетняя просьба изменить дату оформления поста и признака "Прочитано" (чекбокс) к @SupportTech остаются без ответа и захотелось решить эту проблему скриптом для TamperMonkey и просто немного обновить свои навыки и умения, никак не связанные с JS в обыденной жизни.

Скрипт в консоли и в TamperMonkey работает. Строковое поле «Двадцать часов назад» на дату заменяет.

Но дата выводится в ISO формате. А мне нужна дата в российской локали, а этого никак не могу добиться.

Подскажите плиз, в чём затык.

Скрипт:

document.querySelectorAll("time").forEach(item => item.innerHTML = Date(item.getAttribute('datetime')).toLocaleString("ru-RU"));

Результат отработки скрипта (см стрелочку):

В консоли проверочное отрабатывает красиво и чётко:

var today = new Date();

console.log(today.toLocaleString("ru-RU"));

то есть проблема явно не в строке определения локали

помогите плиз.

Ссылка на прошлую часть: Долгая дорога во фронтэнд, часть 3. Предпоследняя

После завершения второго из трех блоков обучения я решил, что пора вывесить резюме. В резюме я приврал, что уже закончил java script. Зарплатные ожидания я выставил около 50000. Это считается много для новичка, но цель резюме была просто посмотреть ситуацию на рынке труда. Параллельно просматривал вакансии на джунов фронтенда (их мало) и нашел вакансию тестировщика программного обеспечения в крупную компанию. Вакансия не предполагала спец знаний, а только наличие головы. Я откликнулся на нее и создал для нее резюме тестировщика. Результаты просмотров резюме: фронтендера - 2 шт за месяц,  тестировщика - 16 за месяц.

В итоге меня позвали на собеседование в ту компанию тестировщиком и я его прошел). Сейчас я работаю тестировщиком за очень хорошую зарплату для человека без опыта. Обучение в академии я бросил- во первых не потянуть по времени, во вторых по количеству информации. Хотел заморозить свое обучение, что бы вернуться к нему когда разгребусь на работе, но академия мне отказала (жлобы).

Итоги: мое мнение, 1. что фронтендеры действительно не нужны сейчас. Рынок переполнен. Зарплаты очень не большие. 2. Оказалось что есть направления в it куда можно попасть и без спец знаний, и работодатель вас сам будет учить. 3. Обучение в академии скорее всего помогло мне найти работу, хоть и косвенно - я прокачал свой навык обучения и работодатель увидел подтверждение что я готов учится и меняться. Кроме того я бы не нашел эту вакансию если бы не искал вакансию фронтендера по разным площадкам.

Главный итог: под лежачий камень вода не течет. Но результат может несколько отличатся от запланированного, как в моем случае.

добрый день, хотелось бы получить оценку и мнение по поводу тестового задания(особенно по времени выполнения) на позицию frontend джуна с зп 30к

само тестовое:

Ориентировочное время выполнения 4-8 часов

Разработать SPA приложение по заданию ниже.

В качестве фреймворка предпочтительнее использовать vue.js. Но также рассматриваем кандидатов с выполненным заданием на react или angular.

В качестве сборщика предпочтительнее использовать Webpack.

--- ПРИЛОЖЕНИЕ и ЯДРО ---

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

В состав контейнера должны войти хидер с меню из двух страниц и область для загрузки контента под каждую страницу (блоков).

Контент дочерних блоков должен подгружаться динамически с отложенной загрузкой (отдельным бандлом).

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

Первым плагином ядра является плагин, реализующий паттерн шина данных. Он реализует в себе глобальную на уровне приложения шину данных. Каждый компонент системы может писать в нее события или читать их из нее (посредством подписки).

Вторым плагином ядра будет плагин, реализующий SDK для взимодействия с биржей binance (только 2 метода: получить биржевой стакан по определенному символу по REST и подписаться на обновления стакана по WS). (См. раздел Diff. Depth Stream в документации: https://github.com/binance-exchange/binance-official-api-doc...).

--- GUI КОМПОНЕНТЫ ---

В приложении на первой странице расположить компонент, который при помощи плагина ядра "SDK" забирает состояние стакана по определенному символу с биржи binance (можно применить limit=500, чтобы не тянуть стакан на всю глубину), подключается на обновления данных по ws для этого символа (по умолчанию берется по BTCUSDT) и отрисовывает стакан в подобном формате

|----------|----------|----------||----------|----------|----------|

|--Amount--|--Price---|--Total---||--Amount--|--Price---|--Total---|

|----------|----------|----------||----------|----------|----------|

| ... | ... | ... || ... | ... | ... |

Где левые три колонки относятся к ордерам тиба Bid, правые к ордерам типа Ask.

Price и Amount (Quantity) получаются из binance. Total рассчитывается на клиенте как Price * Amount.

Для верстки желательно использовать правила именования по БЭМу.

Цвета и отступы можно использовать на свой вкус.

Верстка должа быть резиновая и адаптивная для мобилки и десктопа. Breakpoint можно выбрать самостоятельно.

В мобильной версии отображать только колонки с Price и Amount.

Таблица должна помещаться по вертикали на странице (без скрола на страница) и должна содержать свой скрол-бар.

Скролл в таблице должен появляться по ховеру на таблицу, сама таблица и ее контент должны оставаться на месте при этом.

Внешний вид скроллбара не принципиален. Таблица скроллится внутри, шапка остаётся на месте.

Полоса скролл бара начинается под шапкой. При скролле значения в таблице не должны наезжать на шапку.

Компонент должен уметь:

* читать сообщение об изменении читаемого символа из плагина "шина данных". При изменении символа компонент должен очищать свое содержимое по предыдущему символу и загрузить данные по новому.

* транслировать в шину данных в виде сообщений все примененные diff-изменения.

На второй странице расположить компонент, сожержащий в себе:

* DropDown перечнем символов. Их можно зашить статически BTCUSDT, BNBBTC и ETHBTC

* Cписочный элемент

DropDown при изменении выбранного элемента отправляет в шину данных событие об изменении активного символа.

Cписочный элемент читает шину данных и отображает информацию о каждом diff-изменении в новой строке.

Дополнительное задание (если успеваете):

* Релизовать SSR для приложения

Всё, что покажется в задании непонятным или неоднозначным к трактовке, делайте на свое усмотрение, соблюдая здоровый рационализм.

Главное - это общий полученный результат. Если возникнет непреодолимое по вашему мнению препятствие, пиши свой(и) вопрос(ы) нам. По завершении нам нужна ссылка выложенного тестового на GitHub Pages и ссылка на код.