html, css, js, ts, react, redux

Telegram: Юрий Костин (https://t.me/YuraKostin)
Контакты

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (12)

Лучшие ответы пользователя

Все ответы (46)
  • Где найти интерактивное изучение js?

    yurakostin
    @yurakostin
    Front-end developer
    Самый крутой интерактив это садиться и программировать.
    Всегда рекомендую, в качестве учебника для начала, прекрасный ресурс Ильи Кантора.
    https://learn.javascript.ru/
    Следуйте по урокам, выполняя все задачи, не переходите на следующий, пока не поймёте текущий. Если не получается решить задачу - посмотрите решение, но обязательно осознайте, почему работает так, а не иначе. Это может отнять время, но если js - технология, которая в будущем вам пригодится, то это время будет потрачено с пользой.

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

    Удачи.
    Ответ написан
    2 комментария
  • Где используются прототипы, наследование в JS приложениях?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.
    На самом деле всё проще.
    Не обижайтесь, но вы просто не так хорошо знаете сам javascript.

    1. prototype - ссылка на прототип объекта.
    Array.prototype, Number.prototype. В нём хранятся методы и свойства этого объекта, а также... (далее переходим к __proto__)

    2. __proto__ - тоже ссылка на прототип. Например, введите в консоли [] и раскройте ветвь. У вас всего два свойства. Одно - length - количество элементов в массиве. Другое - __proto__. А где же все методы, которые мы можем использовать с массивами filter, map, slice и так далее? Они лежат в __proto__. Более подробно здесь.

    3. inheritance соответственно - наследование. JS построен на прототипной парадигме (надеюсь, я тут не наврал). Array наследуется от Object. Это можно легко увидеть, посмотрев Array.prototype. Там вы увидите тот самый __proto__, являющийся ссылкой на Object.prototype. Вся инфа по ссылке выше.

    4, 5. call и apply постепенно уходят из обихода, но тем не менее про них важно знать и уметь ими пользоваться. Эти методы позволяют вызвать функцию в контексте, который вам необходим.

    Например вам нужно вызвать метод какого-то объекта, который работает с this в контексте другого объекта, у которого этого метода нет. Вы можете сделать следующее:
    var o_1 = {
    	name: 'Peter',
    	hello: function () {
    		console.log('Hello, ' + this.name);
    	}
    };
    
    var o_2 = {
    	name: 'Jane'
    };
    
    o_1.hello.call(o_2); // Фактически вы говорите "вызови метод такой-то для объекта такого-то"


    Для передачи аргументов в "заимствованную" функцию оба метода принимают аргументы, каждый по-своему.
    var o_1 = {
    	name: 'Peter',
    	hello: function () {
    		console.log('Hello, ' + this.name);
    	},
            sum: function (a, b) {
    		console.log(`${this.name} sum a and b to ${a + b}`);
    	}
    };
    
    var o_2 = {
    	name: 'Jane'
    };
    
    o_1.sum.call(o_2, 2, 4);
    o_1.sum.apply(o_2, [1, 2]);


    Отличие между этими двумя методами в том, как они принимают аргументы, которые попадут в функцию.
    call принимает список аргументов, начиная со второго, а apply, соответственно, принимает массив.

    Также, ничто не мешает вам вызвать функцию, которая не нуждается в контексте, для этого первым аргументом можно передать null.

    var o = {
    	sum: function (a, b) {
    		console.log(a + b);
    	}
    }
    o.sum.call(null, 1, 2);
    o.sum.apply(null, [1, 2]);


    Подробнее тут.

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

    var o = {
    	a: 1,
    	b: 2,
    	sum: function () {
    		console.log(this.a + this.b);
    	}
    };
    
    var o2 = {
    	a: 10,
    	b: 20
    };
    
    var o2Sum = o.sum.bind(o2);
    
    o2Sum();


    Также с помощью bind можно каррировать функции.
    Всё есть здесь

    PS: надеюсь, код не содержит ошибок и я нигде не налажал и всё правильно рассказал.
    Ответ написан
    4 комментария
  • Как эффективно развивать себя как разработчика?

    yurakostin
    @yurakostin
    Front-end developer
    Вставлю свои пять копеек.

    Начну как всегда, наверное издалека, уж извините.

    У меня стало довольно мало времени на то, чтобы разрабатывать дома: ребёнок, удалённость жилья от места работы и т д.
    И вот ушедшие три дня выходных я потратил на ресёрч некоторых вещей.
    Прочитал почти половину документации по Vue, запустил hello world на clojure script, ну и галопом по европам прошёл по реализациям FRP на js, остановивишь на cellx. С ней просидел весь вечер.
    И вот только после этого я ощутил то забытое чувство, когда узнаёшь что-то новое, расширяешь кругозор.

    К чему я это всё?

    Я вспомнил, что до переезда, до ребёнка, я "летел" домой и до часу-двух ночи изучал что-то новое. Читал книги/статьи/какие-либо источники, и задавал себе вопросы "А что если сделать так?", "А если применить этот метод?", "А если вызвать с этим параметром?", etc, и пробовал на все свои вопросы найти ответы.
    А также я постоянно хотел что-то "напилить". Свой сайт, какой-нибудь маленький проект. Какой-нибудь маленький плагин. Можно продолжать бесконечно..

    Самое интересное не то, что я получал какой-то интересный готовый продукт - этого почти ни разу не случилось, а то, что я повышал качество своих навыков, узнавал что-то новое, так как иногда что-то не работало, приходилось гуглить, рефакторить, использовать функции, библиотеки, фреймворки, которые ещё ни разу не использовал. Именно этот опыт на мой взгляд делает вас ценным разработчиком.

    Но - как в рекламе - и это ещё не всё.

    Ещё есть важные аспекты, которые делают из вас хорошего разработчика:
    1. Умение и можно сказать любовь читать чужой код. Читать, понимать(править?). Дело в том, что на любых проектах, особенно тех, где большая кодовая база была написана до вас, вам придётся разбираться в коде, и соответственно чтение и правка чужого кода будет занимать примерно 65-85% вашего времени.
    2. Отсутствие боязни перед чтением документации. Кто-то бежит смотреть статьи, где люди пишут свой опыт внедрения или, извините "пробования" какой-либо технологии или инструмента, и упускает огромный пласт информации, который описан в документации. Пласт, который может затянуть старт использования, но помочь вам быть абсолютно в теме того, с чем и как вы собираетесь рабоать.
    3. Третий пункт, немного связан со вторым. Вам нужно знать английский. На уровне достаточном чтобы понимать эту самую документацию. А также читать статьи зарубежных разработчиков. Ведь почти всё, что мы учим, сделано за бугром, и в связи с тем, что английский - международный язык, все более менее популярные библиотеки/фреймворки/инструменты, а точнее документация к ним, существуют на английском языке как минимум.

    Это всё, я думаю, более менее объективные пункты.. Ээмм, ну ладно, субъективно-объективные.. Ну короче вы поняли =)

    О ещё более субъективных, пожалуй, писать не буду. И так уже много букв, извините.
    Ответ написан
    Комментировать
  • Как систематизировать изучение JS?

    yurakostin
    @yurakostin
    Front-end developer
    Ссылок, собственно, дофига..

    https://learn.javascript.ru/
    https://github.com/getify/You-Dont-Know-JS
    jstherightway.org
    largescalejs.ru
    shop.oreilly.com/product/9780596517748.do
    https://habr.com/company/ruvds/blog/337042/

    У Кантора вполне себе систематизированный учебник. Именно с него я начал, когда понял, что jquery для меня недостаточно.
    Но дело не только в том, что вы читаете учебник. Я уже 100500 раз, наверное, это говорю, но:
    1. Вы должны решать все задачи, которые есть в списке задач к главам.
    2. Важно ещё пытаться применить полученные знания где-то: в своей работе, или в какой-то выдуманной задаче. То есть, например, нужно использовать `Array.prototype.filter` столько раз, чтобы не возникало больше вопросов "как оно работает?", чтобы руки "помнили".

    Разумеется, это всё нужно для того, если вы хотите во фронт. Пласт информации огромный. Сам js, браузерные API, и прочее-прочее..

    Может быть, что всё выше - оффтоп, но дело в том, что нет систематизированного подхода, как мне кажется.
    Есть знакомые, которые умеют работать только с DOM-ом и событиями, а как работать с данными в js, что такое замыкания - не знают. А сайт Ильи Кантора им почему-то кажется сложным.

    Просто решайте разные задачи: работайте с данными; рисуйте на canvas, svg; манипулируйте DOM-ом; используйте service worker-ы; etc.. Это и будет расширять ваш кругозор..
    Но начать я бы советовал всё-таки с учебника Ильи ;)
    Ответ написан
    Комментировать
  • Задачки по javascript?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.

    Устройтесь уже на работу(фриланс) и задач будет хоть отбавляй.
    Ну серьёзно.
    Вы хотите чтобы мы вам вот сюда скинули прикладные примеры задач из головы, которые будут абсолютно синтетическими?
    Программируйте, придумывайте себе задачи.

    Если вам нужны эти задачи, то вероятно, вы не поняли до конца, в каких ситуациях эти методы используются, так ведь? Или просто хотите руку набить?
    Ответ написан
    2 комментария