Задать вопрос

Сергей

Javascript developer
Ответы пользователя по тегу JavaScript

  • Как реализовать фото мозайку на js?

    @vazonov
    Javascript developer
    Можно делать через canvas, можно через Node.js.
    Сложный алгоритм:
    - Прочитать данные изображения (ширина, высота)
    - "Достать" те пиксели, которые не равны цвету фона (например, картинка белого фона, а буквы логотипа - чёрные) - назовём их "позитивные"
    - Сгруппировать всю картинку по ячейкам определенных размеров (например, 1 ячейка - это 50х50 px, размеры подберите исходя из п. 1)
    - "Закрасить" ячейки необходимой картинкой
    - Найти пересечения ячеек и "позитивных" пикселей
    - Отобразить те ячейки, которые пересекаются с "позитивными" пикселями

    Простой алгоритм: как посоветовал товарищ iBird Rose, используйте маски

    Готовые варианты:
    https://github.com/gustavomazzoni/photo-mosaic
    https://github.com/cemiltokatli/PhotoMosaic
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать так, чтобы цифры в сгенерированном массиве не повторялись?

    @vazonov
    Javascript developer
    Вы можете использовать для этого Set.
    MDN Docs

    Пример:
    const uniqueNumbers = new Set([1, 2, 3, 2]) // будет 1, 2, 3
    Ответ написан
    1 комментарий
    1 комментарий

  • Что написать для тренировки на js с нуля?

    @vazonov
    Javascript developer
    Смотря сколько времени хотите потратить.
    Можно создать проект с нуля. Например, сервис для хранения собственных заметок. Определяете цели, которые будет выполнять приложение (создать заметку, удалить, редактировать, искать по категории). Можете и API написать (welcome to node.js), если хотите сохранять заметки на сервере. Не хотите писать API - можете использовать другие сервисы, которые дадут возможность делать "серверную" работу за Вас, Вам лишь надо с ними "общаться" с клиентской стороны (например, Google Firebase). Если не хотите и этого - можно сохранять заметки локально в браузере (localStorage, IndexedDB). Создавая проект Вы и столкнетесь с написанием и модалок, и кнопок, и пагинации, и очень много всего другого, что пригодится в реальной работе.
    Еще варианты:
    - Приложение для хранения просмотренных фильмов (и фильмов, которые хочется посмотреть. Впечатления, личная оценка)
    - PWA приложение, которое копирует функционал какого-то мобильного приложения (смотрите Google Play, AppStore)
    - API, которое будет выдавать сгенерированные (фейковые) данные (faker.js)
    - WhatApp / Viber / Telegram / Facebook bot для отправки актуальной погоды / курса валют, пр.

    Можете написать то, что пригодится Вам. Например, телеграм бот, который бы присылал Вам новинки фильмов, которые появились на торрентах. Это node.js.

    Можете написать игру на canvas. Можете не на canvas. Просто JS + CSS.
    Еще Варианты:
    - 2048
    - Лабиринт, где что-то куда-то двигается
    - Угадай число (скрипт "загадывает" число, ты вводишь свое - он тебе говорит, больше оно или меньше и пока не угадаешь)
    - Любая другая с использованием популярных js-движков для игр (https://github.com/collections/javascript-game-engines)

    Можете переписать какую-то JS-библиотеку (смотрите на Гитхабе).
    Можете написать свою библиотеку. Начните с малого: допустим, она будет генерировать случайные строки. Или имена, фамилии и эмайлы.
    Еще варианты:
    - Редактор текста
    - Проверка паролей на устойчивость
    - Валидация (паролей, имен, фамилий, телефонов, эмайлов) - привет, регулярные выражения
    - Генерация случайных пикселей на canvas
    - Библиотека-helper: пишете свои функции-велосипеды при работе с данными (спарсить json, склонировать объект, пр.)

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

  • Как вывести записи MongoDB на страницу?

    @vazonov Автор вопроса
    Javascript developer
    Код корректен. Используя for на ejs-странице (см. код выше) можно вывести все записи. Вопрос с пагинацией еще не решил.
    Ответ написан
    Комментировать
    Комментировать