• Какой слайдер-карусель вы используете с Vue.js?

    kulakoff
    @kulakoff Куратор тега Vue.js
    Vue.js developing
    Вот эта штука может очень много: https://github.com/surmon-china/vue-awesome-swiper
    Ответ написан
    6 комментариев
  • Как сделать вертикальную линию между элементами по вертикали?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Можно вот так вот сделать, просто для последнего элемента устанавливая border-left-color: transparent
    https://codepen.io/anon/pen/MzqYrQ
    Ответ написан
    1 комментарий
  • Актуальные книги по js?

    lavezzi1
    @lavezzi1
    Ответ написан
    Комментировать
  • Актуальные книги по js?

    viewDidLoad
    @viewDidLoad
    Советую 2е издание Secrets of the JavaScript Ninja, там все что нужно для полного понимания современного js, есть перевод

    DOM API по learn.javascript.ru и mdn

    Флэнагана категорически не советую
    Ответ написан
    2 комментария
  • Актуальные книги по js?

    @overtest
    На английском: https://github.com/getify/You-Dont-Know-JS
    На русском: https://developer.mozilla.org/ru/

    По-моему, этого вполне достаточно, если базовые знания уже получены. У Мозилы очень хорошая документация с примерами, лучше некоторых книг. Да и книги сейчас уже теряют актуальность - в них был смысл, когда изменения происходили раз в 5 лет, сейчас пока напишут и переведут на русский актуальность теряется.
    Ответ написан
    1 комментарий
  • Актуальные книги по js?

    @kuftachev
    Какие книжки по js? Там все меняется быстрее, чем работают топографические станки!

    Есть лучший русскоязычный ресурс - это https://learn.javascript.ru , а также https://developer.mozilla.org/ru/ , тут что-то есть на русском, а что-то непереведено.

    А дальше уже документации фреймворка, какой нравится, если это Vue.js, конечно ))) Хотя и Angular не плох.
    Ответ написан
    3 комментария
  • Актуальные книги по js?

    @tomatenshi
    Frontend разработчик
    Любимый learn.javascript.ru
    Можно заказать в PDF + EPUB
    Ответ написан
    Комментировать
  • Актуальные книги по js?

    @doublewaffle
    А вы их покупаете?
    Eloquent JavaScript доступен бесплатно на сайте, НО начиная с какого-то момента становится неоправданно сложной книгой. Лучше Head First JavaScript Programming (2014) +> You Don't Know JavaScript, а задачи решать на checkio и codewars + MDN в качестве справочных материалов.
    Ответ написан
    2 комментария
  • Простым языком о замыканиях?

    1. У вас есть алгоритм (функция) F, зависящий от некоторого числа переменных (значений), включая N параметров функции и некоторого количества "свободных" переменных (т.е. определённых вне тела функции, но доступных в теле функции на момент его выполнения).
    2. У вас есть другая функция G, требующая для своей работы некоторую функцию, зависящую от M параметров (причём N > M).
    3. У вас есть желание использовать функцию F как параметр функции G, однако для этого необходимо заранее задать значения всех аргументов, которые G не будет передавать в F (т.е. тех, которые не входят во множество параметров M), а также значения всех свободных переменных (иначе код функции F невозможно будет выполнить).
    4. Для реализации этого намерения вы примените замыкание (иначе просто невозможно).

    Остальное зависит от языка программирования и конкретной ситуации.
    В любом языке основная задача замыкания - связать код функции и данные, с которыми она работает. Эту же задачу связывания кода и данных решают и объекты.
    Ответ написан
    1 комментарий
  • Div, который выглядит по-разному в каждом браузере?

    @itsjustmypage
    Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

    Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

    Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

    https://www.w3.org/TR/css-ui-3/#outline-offset
    5b447ea6c9061121780680.jpeg

    Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно. AMQ4hnM.gif
    Ответ написан
    1 комментарий
  • Какова суть генерации своих событий в JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попробую на пальцах объяснить.

    Событие – это конверт, на котором написано его название. Внутрь конверта можете вложить что-нибудь, а можете оставить конверт пустым.

    Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.

    Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.

    Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название: var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:
    document.getElementById('stolik').dispatchEvent(myEvent);


    Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле detail:
    var event = new CustomEvent('saySomething', { detail: "Hello there!" });


    Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.
    Ответ написан
    2 комментария
  • Как (и возможно ли) дотянуться до Junior JavaScript Developer в кратчайшие сроки?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Во первых: совершенству нет предела.
    Во вторых: невозможно объять необъятное и впихнуть невпихуемое.
    В третьих: как ты не крутись, а технологии развиваются быстрее, поэтому отставание неминуемо, как следствие приходится всегда чем-то жертвовать ради чего-то более важного.

    Итого: заказчика не интересуют твои философские страдания. Его интересует как быстро, качественно и за какие деньги ты решишь его проблемы. Решаешь за разумное время, адекватный ценник и с удовлетворительным качеством - не важно как ты себя именуешь, спрос на тебя будет.

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

    Я не очень понимаю, чего вдруг тебя потянуло в разработку. В целом дело это весьма муторное и рутинное, и его надо бы, по хорошему, очень сильно любить, чтобы прям вот пёрло, тогда есть шанс зацепиться, удержаться и даже эволюционировать как разработчик.

    Я бы, для начала, досконально убедился, что это вот именно прям вот то самое, чем я бы хотел заниматься ближайшие лет пять, а то и десять, потому что иначе не стоит даже и начинать.

    Меня на программирование пропёрло весьма рано, лет в 14-15. Я ощущал собственное безграничное могущество, послушная железяка выполняла любое моё повеление, любой мой каприз, при условии, что он правильно сформулирован. Если железка не делала что нужно, или делала что не нужно, то это всегда была моя вина, это значило что я прокосячился. Подобное осознание настигло меня весьма скоропалительно, после чего мозг начал усиленно дисциплинироваться, и количество лютых фейлов пошло на убыль.

    Коммерческая разработка - это, примерно, от 70% времени/сил на дебаг и фиксы, потому что мало где процессы поставлены грамотно. По хорошему до сего дня (а мне под 40) я только одну команду видел, где процессы прям вообще очень хорошо поставлены и мне посчастливилось какое-то время с ними поработать. За эти несколько месяцев я подрос на целую голову. Самостоятельно достичь сходных результатов было бы весьма затруднительно.

    Сам я сменил стек совсем недавно, начал в конце 15 года, и процесс продолжается до сих пор. Сменил я по одной простой причине - во всех моих прежних проектах большая часть логики с бэка уехала на фронт, и прекраснейший jQuery перестал справляться чуть более чем полностью. Он, по прежнему, хорош, но задачи, которые приходится решать, требуют совершенно других подходов. Для себя я выбрал React, но в целом на рынке имеются альтернативы. По моим данным очень большим спросом пользуется Angular 2+.

    Когда говорят о фронтенд разработке, постоянно говорят о технологиях, стеке, но почти никто не упоминает, что не стеком единым... Существенная часть разработки - это, для начала, понять задачу и построить у себя в голове модель. Заказчики бывают разные, от очень толковых, до очень безтолковых. Соотношение первых ко вторым примерно 1% и всё остальное... Т.е. в большинстве случаев тебе скажут минимум, своеобразно, плюс ты это поймёшь по своему. Потом, по ходу пьесы, в самые неподходящие моменты, начнут всплывать подробности, которые: забыли упомянуть; ну это же очевидно, ты же профи; мы сами не знали, это только выяснилось; ну это же мелочи, мы думаем тебе это будет не сложно; а ты не спрашивал; и т.п....

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

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

    Если ты попадешь в команду, где люди будут понимающие, квалифицированные, процессы выстроены, а джуну задачи будут сгружать джунские, то, считай, тебе крупно повезло. Шансов на это примерно 1%. Особенно учитывая, что джуны это обычно студенты лет в районе 20...

    Когда я менял стек, то я тоже был какое-то время 35-летним джуном. С этим ничего не поделать, потому что, внезапно, стек это не просто так, и имеется масса нюансов, которые с наскоку не освоишь. Чтобы все пощупать, попробовать на зубок, понять и осознать требуется время и усилия, иногда много времени и много усилий. Да, весь прежний багаж служит опорой и поддержкой, и там, где настоящий джун будет копаться недели, ты за пару часов по аналогии поймаешь идею и двинешь дальше. Но эти пару часов никто не отменял, а идей которые нужно отловить сотни, если не тысячи...

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

    Даже если тебе попадается практически идеальный проект, внезапно оказывается, что твоя оперативная память это 5-7+-2 объекта, а удерживать в голове одновременно нужно сотни...

    Зачем я все это рассказываю? Затем, что это реальность, которая для джунов не делает исключений.

    Термин "фигак-фигак и в продакшен" встречается повсеместно, т.к. ресурсы (деньги, время, кадры) практически всегда весьма жестко ограничены и ничего ты с этим не поделаешь.

    У верстальщика в этом плане все проще, потому что его работу видно сразу и невооруженным взглядом. Но просто верстальщик и хороший верстальщик - это земля и небо.

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

    Теперь относительно того что делать - если в бэкграунде нет сильных скиллов по алгоритмике и структурам данных (олимпиады по программированию, универский курс информатики), то прям очень сильно рекомендую прокачать. Будучи наставником на нескольких курсах фронтенда я постоянно встречают студентов, которые "вроде бы" знают язык, но затрудняются скомпоновать пару циклов с условиями, вот буквально просто виснут на неопределенное время, причем без результата. Лично я рекомендую кодварс. Своих студентов я прокачиваю именно там. Достаточно прорешать 30-40 задачек, чтобы базовые скиллы ушли на уровень рефлексов и перестали парить мозг. Правда желательно решать это все с наставником.

    Косвенный бонус тут будет в том, что ты привыкнешь решать задачи на JavaScript. Я когда менял стек, поначалу мыслил на PHP, и подобный финт на кодварс позволил мне переформатировать мышление на JS. Вот мой профиль на кодварс как пруф: https://www.codewars.com/users/iCoderXXI

    Далее, когда ты освоишься в JS практически, очень неплохо будет досконально разобраться в том как работают замыкания и прототипное наследование. Это прям основа основ, и это спрашивают на каждом первом собесе.

    Понять надо настолько глубоко, чтобы легко и просто, с юморком, рассказывать это любой первой встречной бабушке, да так, чтобы та всё поняла... Это вот прям залог успеха в JS, потому что все остальное держится на этих двух китах. В ютубе имеется курс Зоракса (Zorax) и JavaScript Weird Parts, оба про то же самое, первый на русском, второй на инглише. Кантор, безусловно, крут, но эти двое объясняют попроще и понятнее (имхо).

    После этого прокачиваемся в использовании встроенных методов JS, таких как map, reduce, includes, replace и пр. (на том же кодварс)

    После этого нужно прокачаться в ES6+, стрелочные функции, let/const, деструктурирование, рест оператор, классы, промисы, генераторы, async/await, декораторы - без этих продвинутых штук в современных фреймворках ловить нечего.

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

    Потом уже заостряемся на API форм, DOM, AJAX (fetch/axios), вебсокетах, Localstorage и пр.

    И вот только теперь можно переключаться на фреймворки. Проще всего освоить Vue (по слухам), наибольшим спросом пользуются React и Angular, для общего развития так же неплохо бы немного послушать про Ember.JS.

    React только на первый взгляд выглядит простым, на самом деле это только view-библиотека, а в любом нормальном SPA есть много чего еще кроме view, поэтому React всегда идет в компании Redux, Router, и еще целой толпы всего, что тоже придется осваивать, не только с точки зрения API, но и с точки зрения философии (а нахрена оно вообще сдалось?)

    Перед походами на собесы очень желательно иметь портфолио из нескольких готовых проектов, вылизанных стилистически.

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

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

    Еще вроде большие компании вроде Яндекса устраивают летнее обучение, с последующим трудоустройством лучших кандидатов, но это не точно.

    Оптимистичный прогноз - 6-12 месяцев плотного фигачинга и ты в тренде.
    Ответ написан
    7 комментариев
  • Как работать с очень длинными списками в JavaScript (angular, react, vuejs)?

    alvvi
    @alvvi
    export default apathy;
    (angular не использует vdom, для него история другая)
    перерисует целиком свой виртуальный dom

    Давайте немного проясним: виртуальный DOM - это грубо говоря js объект содержащий другие объекты.
    При добавлении нового сообщения туда добавится новый объект и весь DOM сравнится со старой версией с помощью diff-алгоритма специфичного для конкретного фреймворка.
    И только результат этого сравнения добавится в реальный DOM.
    Работа с объектом значительно быстрее работы с самим DOM-ом, поэтому чтобы оно начало работать заметно медленее у вас должен быть дикий уровень вложенности или очень большой DOM.

    100 сообщений и 50 контактов - это небольшие цифры, с таким любой из упомянутых фреймворков справится без просадок.

    Вот пример бенчмарков с большим количеством объектов(1000+) для многих фреймворков на примере незамысловатой таблицы:
    www.stefankrause.net/js-frameworks-benchmark6/webd...
    (там же есть ссылка на репо чтобы увидеть как она выглядит)
    Как видите, там в таблицу уже содержащую 10 000 добавляется еще 1000(!) объектов, и многие фреймворки впонле с этим справляются.

    В реальности же, вам вряд-ли придется добавлять такие цифры, потому что подгружают изначально обычно меньшее количество: такое, которое пользователь сможет увидеть в одном экране, все остальное догружается постепенно по мере надобности. То же самое касается вашей истории чата, ее стоит подгружать только за тот период, за который она необходима пользвателю.
    Ответ написан
    1 комментарий
  • Как изогнуть input?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    Хотелось бы сделать из этой палки изогнутую палку

    Боюсь спросить на сколько изогнутую, как пример не?
    https://jsfiddle.net/vtLn0596/1/
    Ответ написан
    10 комментариев
  • Что посоветуете для изучения JavaScript?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    https://learn.javascript.ru/ - все отлично структурировано
    https://learn.javascript.ru/ebook - вариант книжный
    Ответ написан
    4 комментария
  • Зачем создавать метод в прототипе?

    Прочитайте цикл книг "You dont know Javascript".
    Вопросов по этому языку не останется.
    Ответ написан
    Комментировать
  • Что такое и зачем нужен новый тип данный Symbol в ES15?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Что такое

    Новый тип данных symbol - это попытка ввести уникальные идентификаторы. Все крутится вокруг функции Symbol. Это не конструктор в полном смысле слова, с new ее использовать не получится. Это скорее маленькая фабрика. Она просто возвращает новый символ каждый раз. Это важно. Каждый раз новый. В качестве аргумента можно передать строку, но она используется только для отладки.
    Symbol() === Symbol() // false

    Что такое глобальный символ? Какой еще реестр?

    Есть Symbol.for(), это еще один метод, который не просто возвращает символ, но и сохраняет информацию о том, для какого параметра он создавался. Внешне логика работы напоминает хеширование - для разных параметров символы получаются разные, а для одинаковых - одинаковые.
    Symbol.for('my-string') === Symbol.for('my-string') // true
    Symbol.for('my-string') === Symbol.for('another-string') // false


    Зачем это надо?

    Применение этого типа данных - предмет для споров. Большая часть кейсов из интернета - это попытки поиспользовать новую фишку только ради того, чтобы ее поиспользовать. Самые популярные и практически применимые варианты:
    • В качестве ключа для доступа к свойству объекта. Грубо говоря вместо obj[key] использовать obj[some-magic-unique-key]. Позволяет избежать коллизии этих самых ключей если вы расширяете существующий объект из сторонней библиотеки. На практике встречается не очень часто, особенно в небольших проектах, но по всей видимости это - причина появления символов в языке.
    • Некоторая иллюзия приватных свойств. Символы по-своему работают с циклами и многими методами, связанными со свойствами объекта, становясь невидимыми для них. В результате можно разделить "все свойства с обычными ключами" и "все свойства с ключами-символами". А еще можно запутать код до безобразия.
    • Также, пользуясь предыдущей мыслью, можно сделать что-то вроде метаданных для любого объекта, которые опять же не сломают существующий код, но могут быть использованы для хранения какой-то информации и мередачи ее между отдельными модулями. Штука довольно интересная.
    Ответ написан
    Комментировать
  • Что делает эта конструкция в jquery?

    rockon404
    @rockon404
    Frontend Developer
    Такой вариант записи используют в JS, когда надо получить ключ или вызвать функцию с помощью переменной.
    Это возможность самого языка, а не конструкция jquery.
    var foo = {
      bar: 'bar value',
    };
    
    console.log(foo.bar);
    // => bar value
    
    console['log'](foo['bar']);
    // => bar value


    Разберем ваш пример. Такая запись:
    var action = 'addClass';
    
    $('.some-selector')[action]('some-class');

    равносильна такой:
    $('.some-selector').addClass('some-class');

    То же самое для объекта:
    var key = 'name';
    
    var obj = {
      name: 'Tom',
      age: 24,
    };
    
    console.log(obj[key]);
    // => Tom
    
    console.log(obj.name);
    // => Tom
    
    console.log(obj[key] === obj.name);
    // => true
    
    key = 'age';
    
    console.log(obj[key]);
    // => 24


    Так же есть случаи, когда к ключу можно обратиться только таким способом:
    var obj = {
      'three words key': 'value',
    };
    
    console.log(obj['three words key']);
    
    // => value
    Ответ написан
    1 комментарий