• Где найти мини-задачи по JS?

    hzzzzl
    @hzzzzl
    https://www.codewars.com/
    8 уровней сложности задач, когда решишь, то видишь чужие решения
    Ответ написан
    Комментировать
  • Где найти мини-задачи по JS?

    @vchpro
    SoloLearn
    Приложение русское, сайт английский.
    Много задач + бесплатное обучение по многим языкам
    Ответ написан
    Комментировать
  • Правильно ли так делать и как лучше выполнять несколько запросов?

    0xD34F
    @0xD34F Куратор тега Vue.js
    1. Не ок.

    Во-первых - модифицируете данные компонента внутри вычисляемого свойства.
    Во-вторых - а что если количество свойств товара увеличится? Опять будете копипастить?

    Исправляем:

    phonesProcessed() {
      const classes = Object.fromEntries(this.classes.map(({ classinfoName: c, items }) => [
        c,
        Object.fromEntries(items.map(n => [
          n[`id${c[0].toUpperCase()}${c.slice(1)}`],
          n.name,
        ])),
      ]));
    
      return this.phones.map(n =>
        Object.fromEntries(Object.entries(n).map(([ k, v ]) => [
          k,
          classes.hasOwnProperty(k) ? classes[k][v] : v,
        ]))
      );
    },


    2. Чтобы объединить - это надо на бэкенде вопрос решать. На клиенте... Ну, можно избавиться от копипасты:

    created() {
      [
        [ '5ad979f4-7393-11ea-b9b1-d7fe1923484d', 'classinfo', 'classes' ],
        [ '46bf408d-739d-11ea-b9b1-5301e3b2b9ba', 'phones', 'phones' ],
      ].forEach(([ key, apiPropName, componentPropName ]) => {
        axios
          .get(`https://jsonblob.com/api/${key}`)
          .then(({ data: { [apiPropName]: d } }) => this[componentPropName] = d)
          .catch(e => this.errors.push(e));
      });
    },
    Ответ написан
    1 комментарий
  • Как просумировать значение в дубликатах строк с поиском по дате?

    Hannnn
    @Hannnn
    Developer
    Главная суть создать уникальный ключ и зрупировать данные.

    get_key: создать ключ на основе базовых полей (string) и extra (eg: date);
    combine_rows: что нужно сделать с дубликатами;
    read_rows: pre-processor для входных данных.

    Input (test.csv)

    n,mark,type,view,date
    0,bmw,v1,2,01-01-2020
    1,bmw,v1,8,02-01-2020
    2,bmw,v2,5,04-02-2020
    3,audi,v1,3,09-02-2020
    4,audi,v1,8,21-03-2020
    5,kia,v1,13,24-03-2020


    import csv
    
    from datetime import datetime
    
    
    def get_key(row, basic_path=('mark', 'type',), date_path=('year',)):
        key = '_'.join((str(row[bp]) for bp in basic_path))
        extra_key = '-'.join((str(getattr(row['date'], dp)) for dp in date_path))
        return f'{key}_{extra_key}'
    
    
    def combine_rows(target_row, row):
        target_row['view'] += row['view']
    
    
    def read_rows(path):
        with open(path, 'r') as handler:
            reader = csv.DictReader(handler)
    
            for row in reader:
                row['view'] = int(row['view'])
                row['date'] = datetime.strptime(row['date'], '%d-%m-%Y')
    
                yield row
    
    
    def main():
        result = dict()
    
        basic_path = ('mark', 'type',)
        date_path = ('year',)
    
        for row in read_rows('test.csv'):
            key = get_key(row=row, basic_path=basic_path, date_path=date_path)
    
            if key not in result:
                result[key] = row
            else:
                combine_rows(target_row=result[key], row=row)
    
        for value in result.values():
            print(value)
    
    
    if __name__ == '__main__':
        main()


    Result 1 - групировать по марке и типу + год

    Parameters
    basic_path = ('mark', 'type',)
    date_path = ('year',)

    Output
    {'n': '0', 'mark': 'bmw', 'type': 'v1', 'view': 10, 'date': datetime.datetime(2020, 1, 1, 0, 0)}
    {'n': '2', 'mark': 'bmw', 'type': 'v2', 'view': 5, 'date': datetime.datetime(2020, 2, 4, 0, 0)}
    {'n': '3', 'mark': 'audi', 'type': 'v1', 'view': 11, 'date': datetime.datetime(2020, 2, 9, 0, 0)}
    {'n': '5', 'mark': 'kia', 'type': 'v1', 'view': 13, 'date': datetime.datetime(2020, 3, 24, 0, 0)}


    Result 2 - групировать по марке и типу + месяц и года

    Parameters
    basic_path = ('mark', 'type',)
    date_path = ('month', 'year',)

    Output
    {'n': '0', 'mark': 'bmw', 'type': 'v1', 'view': 10, 'date': datetime.datetime(2020, 1, 1, 0, 0)}
    {'n': '2', 'mark': 'bmw', 'type': 'v2', 'view': 5, 'date': datetime.datetime(2020, 2, 4, 0, 0)}
    {'n': '3', 'mark': 'audi', 'type': 'v1', 'view': 3, 'date': datetime.datetime(2020, 2, 9, 0, 0)}
    {'n': '4', 'mark': 'audi', 'type': 'v1', 'view': 8, 'date': datetime.datetime(2020, 3, 21, 0, 0)}
    {'n': '5', 'mark': 'kia', 'type': 'v1', 'view': 13, 'date': datetime.datetime(2020, 3, 24, 0, 0)}


    PS: на идеально решение не претендую.
    Ответ написан
    2 комментария
  • Что такое Vue Native?

    andykov
    @andykov
    Shit happens
    Vue Native это обертка над React Native.
    NativeScript это отдельный кроссплатформенный фреймворк который дает доступ к нативным компонентам платформы. И оба эти инструмента это не WebView.
    NS использует движок V8 JavaScript для Android и JavaScriptCore для iOS. RN использует только JavaScriptCore
    для обеих платформ. NS может в JS, TS, Angular и в этом году добавили официальную поддержку Vue за счет интеграции с плагином nativescript-vue
    Можно в playground'e пощупать.

    С RN я не работал, как и с VN, но мне интересно развитие NS.
    В общих чертах RN и NS похожи, но отличаются архитектурой взаимодействия с родными модулями платформ.
    NS работает c API интерфейсом платформы непосредственно в движке JS, отправляя вызовы и конвертируя данные на лету. При компиляции все XML компоненты передаются на собственные компоненты Android и iOS перед упаковкой в ​​двоичный файл платформы. В оф.документации все расписано
    Есть хорошая статья в блоге NS, где они разбирают серию статей от Airbnb об опыте с RN.

    Считаю что NativeScript недооценен сообществом, годный продукт.

    Простые приложения можно строить и на NS, что то более сложное где память решает, лучше писать нативно.
    Ответ написан
    1 комментарий
  • Mockup сервисы для вставки скриншота сайта?

    @SOmni
    На pictofon.com можно по URL получить скрин и сразу вставить в мокап. Например, так:
    e7fdabde4a0148d79b64258457a33e8e.png

    А можно самому записать скринкаст и сделать так:
    12339f31adfc4fb7a578e3f2d019d794.gif
    Ответ написан
    Комментировать
  • Nuxt.js Как разделить приложение?

    @karambafe
    Явным образом нельзя, по крайней мере в документации об этом ни слова, да и при создании нового приложения через стартер есть выбор universal (SSR+CSR) или client-side only mode.

    Стандартным решением данного вопроса является разделение на два разных приложения:
    1. Морда (особенного если это простенький лендос) делается на любой технологии (тот же nuxtjs в режиме генерации статики).
    2. Админка делается на любом client-side фреймворке (Vue, React, etc), потому что ей обычно не нужно SEO и нет повышенных требований к скорости загрузки, время tti и тд. "Поселить" ее можно на поддомене.

    Таким образом получится 2 статических приложения, а значит не нужно беспокоиться о node.js :)

    Плюс по опыту работы с nuxt.js могу сказать, что там есть свои особенности с роутером, хранилищем, подключением сторонних библиотек. Плюс своя система модулей - отдельный модуль axios, proxy и тд.
    Еще надо четко понимать, когда идет клиентский, а когда серверный рендеринг.
    В общем на первоначальном этапе время разработки может прилично увеличиться.
    Ответ написан
    Комментировать
  • Как интегрировать Telegram бота на сайт?

    @webenbond
    Комментировать
  • Как с технической точки зрения сделаны сервисы генерирующие виджеты?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Поделюсь как это сделано у нас, надеюсь поможет
    во-первых, сайт заводится в нашей БД и ему присваивается id
    во-вторых, сайт вставляет к себе наш код, он небольшой, но делает две вещи:
    1. создает временную функцию в window - которая совпадает по имени с нашей функцией запуска, но просто сохраняет себе в массив все вызовы и их аргументы
    2. начинает загрузку js-кода нашего виджета
    в-третьих, сайт вызывает нашу функцию запуска, куда передает свой id из нашей БД и некоторые параметры

    когда наш основной js загрузился, он делает следующее:
    1. переписывает в window временную функцию собирающую аргументы на настоящую, которая запускает вставку виджета
    2. если собранны запуски до этого момента - запускает их в настоящей функции запуска
    3. функция запуска дергает сервер и запрашивает данные по id сайта
    4. вставляем на страницу iframe и в нем рисуем виджет

    на деле все чуть сложнее, но общий принцип такой
    Ответ написан
    2 комментария
  • Как вытащить числа из строки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const numbers = (string.match(/-?\d+(\.\d+)?/g) || []).map(Number);
    Ответ написан
    3 комментария
  • Обработка Ajax запроса?

    chupacabramiamor
    @chupacabramiamor
    Инженегр-программист
    Каждая функция $.ajax возвращает так называемый объект Deffered. Их можно использовать при помощи еще одной функции $.when, при помощи которой мы при успешном завершении обоих запросов получаем возможность достучаться до ответов в одном месте:

    console.clear();
    
    var root = 'https://jsonplaceholder.typicode.com';
    
    function requestOne(callback) {
        return $.ajax({
            type: "GET",
            url: root + '/posts/1',
            // dataType: "json",
            success: callback
        });
    }
    
    function requestTwo(callback) {
        return $.ajax({
            type: "GET",
            url: root + '/posts/2',
            // dataType: "json",
            success: callback
        });
    }
    
    function result() {
      var deffered1 = requestOne();
      var deffered2 = requestTwo();
    
      $.when(deffered1, deffered2).done(function(r1, r2) {
        console.log(r1[0].id + r2[0].id);
      })
      
      // результатом хотел видеть сложение двух айдишников
      // console.log(r1 + r2);
    }
    result();
    Ответ написан
    2 комментария
  • Обработка Ajax запроса?

    roswell
    @roswell
    и швец, и жнец, и на дуде игрец
    Первая буква в AJAX — сокращение от Asynchronous, из чего следует, что время и даже результат выполнения requestOne и requestTwo фактически неопределённы. Я бы устроил нечто вроде
    requestOne( function( data ) {
        var r = false;
        if ( data ) {
            var r1 = data.id;
            requestTwo( function( data ) {
                if ( data ) {
                    var r2 = data.id;
                    console.log( r1 + r2 );
                }
            } );
        }
    } );

    Или через $.when ; примеры приводить не буду, их по ссылке достаточно.
    Ответ написан
    1 комментарий
  • Можно ли такое сделать в Google Таблицы?

    dimonchik2013
    @dimonchik2013
    non progredi est regredi
    Ответ написан
    Комментировать
  • Как удалить объект из массива если в свойстве объекта присутствует null?

    rockon404
    @rockon404
    Frontend Developer
    var filteredArray = sourceArray.filter(function(e) {
      return e.someKey !== null && e.someKey !== undefined;
    });


    По поводу ваших велосипедов с Array.prototype.clean. Оставьте эту затею, так делать не принято. Ваша функция clean, помимо null и undefined удаляет из массива элементы со значением 0 и пустые строки.
    Используйте функцию filter.
    Ответ написан
    2 комментария
  • Две сетки с разным количеством колонок, как быть?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Насчет сетки, могу предложить вот такой инструмент: https://www.npmjs.com/package/smart-grid
    Видео о том, как с ней работать можно посмотреть вот тут:https://www.youtube.com/watch?v=KFVoIzaGPYg&list=P...
    Эту сетку можно сгенерировать под любое кол-во колонок и с любыми межколоночниками. Настройки для генерации сетки задаются в smart-grid.js, а сама генерация происходит через Node.js. Можно задать сначала сетку на 15 колонок и межколоночник в столько-то пикселей, сохранить препроцессорный файл на выходе просто переименовав его, а потом поменять настройки под сетку на 12 колонок, только задать разные префиксы для примесей.
    Сам пользуюсь, и рекомендую. Для кроссбраузерности можно использовать для построения сетки не флексы, а инлайнблоки, а для межколоночника указать значения в процентах. Можно и по деолту все оставить, и сетку на флексах сделать, так как они уже хорошо работают.

    2. Если я правильно понял суть дела, то можно задать флекс-контейнеру flex-direction: column, чтобы они по вертикали строились flex-wrap:wrap, чтобы переносились на новую вертикальную ось, далее надо задать высоту родителю, чтобы блоки переносились на новый ряд, поиграться с justify-content, align-content, align-items, а тем блокам, которые надо вынести вправо задать два самых больших ордера и задать им базис по приблизительно 50% (кальк 50%-20рх).
    Ответ написан
    4 комментария
  • Защита контактов от спам-ботов?

    Подключаете сайт к cloudflare.com. (бесплатно) Он автоматически шифрует email адреса. На счет номеров не знаю

    Там заодно и халявный https и еще куча всяких фичь, типа защита от ddos и тд
    Ответ написан
    Комментировать
  • Как формируются такие блоки в выдаче поисковика (см.внутри)?

    djQuery
    @djQuery
    "Кодируем помаленьку" ("Сказка о Тройке")))
    Гугли "микроразметка"
    Ответ написан
    Комментировать